app-cmf-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-icon {
  cursor: pointer;

  &.main {
    margin: 0 8px;
  }
}

.overlay {
  display: flex;
  flex-direction: column;
  gap: 10px;

  width: 900px;
  max-height: 95vh;

  background-color: var(--color-gray-fff);
  border: 1px solid rgb(220 220 220);
  border-radius: 4px;
  box-shadow: 2px 2px 3px 0 rgb(67 84 109 / 25%);
  overflow: hidden;

  .search-bar {
    display: flex;
    gap: 5px;
    align-items: center;

    height: 32px;
    margin: 8px 8px 0;
    padding: 3px 3px 3px 8px;;

    background-color: var(--theme-hack-bg-color, #f4f5f7);
    border: solid 1px var(--color-gray-eee);
    border-radius: 4px;

    &__input {
      flex: 1 1 auto;
      background-color: var(--theme-hack-bg-color, #f4f5f7);
      border: none;
      outline: none;

      &::placeholder {
        color: #b1abab;
      }
    }
  }

  .search-bar-extended-wrapper {
    border-top: 1px solid var(--color-gray-eee);

    .search-bar-extended {
      cursor: pointer;

      display: flex;
      flex: none;
      gap: 10px;
      align-items: center;
      justify-content: center;

      height: 44px;
      padding: 10px 8px 8px 12px;

      .text {
        margin: 0;
        color: var(--default-color);
      }

      .return-icon-wrapper {
        display: flex;
        margin-left: auto;
        width: 24px;
        height: 18px;

        background-color: #eaebef;
        border-radius: 2px;

        app-cmf-icon {
          margin: auto;
        }
      }

      &:hover:not(:has(.global-model:hover)) {
        background-color: var(--app-bg-color-l3);
      }
    }
  }

  .section-title {
    margin: 0;
    margin-left: 5px;

    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: var(--default-color);
  }

  .checkbox-wrapper {
    display: flex;
    flex-direction: row;
    gap: 7px;
    align-items: center;

    margin-left: 5px;

    input {
      margin: 0;
    }
  }

  .content {
    display: flex;
    flex-direction: row;
    min-height: 0;
    max-height: 80vh;

    .results-wrapper {
      overflow-y: auto;
      display: flex;
      flex-direction: column;

      width: 650px;
      max-height: 750px;
      padding-left: 20px;

      .search-tabs {
        margin-right: 10px;
        margin-bottom: 10px;
      }

      .results {
        overflow: auto;
        display: flex;
        flex: 1 1 auto;

        &__container {
          display: flex;
          flex-direction: column;
          gap: 4px;
          width: 100%;

          a,
          a:visited {
            overflow: hidden;
            display: flex;
            flex: none;
            gap: 5px;
            align-items: center;

            padding: 3px 5px;

            color: var(--color-gray-222);
            text-overflow: ellipsis;
            white-space: nowrap;

            border-radius: 2px;

            .result__wrapper {
              overflow: auto;
              display: flex;
              flex: 0 1 auto;
              flex-direction: column;

              .row {
                overflow: hidden;
                display: flex;
                gap: 10px;

                font-size: 12px;
                color: var(--color-gray-aaa);
                text-overflow: ellipsis;

                &.bottom {
                  gap: 3px;
                  margin-left: 26px;
                  line-height: 15px;

                  div {
                    font-size: 11px;
                  }
                }

                .name {
                  overflow: hidden;
                  flex: 0 1 auto;

                  font-size: 14px;
                  font-weight: 600;
                  text-overflow: ellipsis;
                }

                .recent-icon {
                  display: flex;
                  align-self: center;
                  width: 16px;
                  height: 16px;
                }

                ::ng-deep app-cmf-doodle-icon {
                  display: flex;
                }
              }
            }

            .name {
              font-weight: 400;
              color: var(--default-color);
            }

            &:hover {
              background-color: var(--theme-hack-bg-color, #dee0e6);
            }
          }
        }
      }

      .recents:hover {
        -webkit-mask-position: left top;
      }

      .recents {
        flex: 1 1 auto;
        gap: 5px;

        .recent-searches {
          margin-right: 5px;
          margin-bottom: 5px;
        }

        &__title {
          margin: 0;
          padding: 0;

          font-size: 14px;
          font-weight: 500;
          line-height: 24px;
          color: var(--default-color);
        }
      }

      .scrollbar-on-hover {
        mask-image: linear-gradient(to top, transparent, black), linear-gradient(to left, transparent 10px, black 10px);
        mask-position: left bottom;
        mask-size: 100% 20000px;
        -webkit-mask-image: linear-gradient(to top, transparent, black), linear-gradient(to left, transparent 10px, black 10px);
        -webkit-mask-size: 100% 20000px;
        -webkit-mask-position: left bottom;
        transition: mask-position 0.3s, -webkit-mask-position 0.3s;

        &:hover {
          -webkit-mask-position: left top;
        }
      }

      .nothing-found {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;

        margin-top: 20px;

        .text {
          display: flex;
          flex-direction: column;
          gap: 10px;
          align-items: center;

          color: var(--color-gray-666);
        }
      }
    }

    .filters-wrapper {
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 24px;

      width: 278px;
      height: 100%;
      max-height: 750px;
      padding: 8px 14px 10px 16px;

      border-left: 1px solid var(--color-gray-eee);

      .filter {
        display: flex;
        flex-direction: column;
        gap: 12px;
        font-size: 14px;

        .filter-title {
          font-size: 14px;
          font-weight: 500;
          line-height: 18px;
        }

        .checkbox-option {
          display: flex;
          flex-direction: row;
          align-items: center;

          .project-icon {
            display: flex;
            width: 24px;
            height: 24px;
          }

          .checkbox {
            margin-right: 4px;
          }

          .text {
            margin-left: 8px;
            max-width: 180px;
          }
        }

        .select-dropdown {
          width: 240px;
          max-width: 240px;
          height: 36px;
          padding: 8px 12px;

          color: var(--color-gray-888);

          border: 1px solid var(--color-gray-888);
          border-radius: 2px;

          ::ng-deep .mat-select-value {
            font-size: 13px;
          }
        }

        ::ng-deep mat-select .mat-select-placeholder {
          color: var(--color-gray-888);
        }
      }

      .responsible {
        app-cmf-gravatar {
          width: 22px;
          height: 22px;
        }
      }

      .statuses-wrapper {
        display: flex;
        flex-direction: row;
        gap: 24px;
      }

      .add-button {
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        color: var(--chat-button-color);

        &:hover {
          text-decoration: underline;
        }
      }

      wg-select-model {
        display: flex;
        width: 240px;
        max-width: 240px;
        height: 36px;
        padding: 8px 12px;

        color: var(--color-gray-888);

        border: 1px solid var(--color-gray-888);
        border-radius: 2px;

        ::ng-deep input {
          background-color: inherit;
          border: none;
          outline: none;

          &::placeholder {
            color: var(--color-gray-888);
          }
        }
      }
    }
  }

  .link-more {
    align-self: flex-end;
    color: var(--color-href);
  }

  ::ng-deep .mat-progress-spinner circle {
    stroke: var(--color-gray-666);
  }
}

.backdrop {
  opacity: 0;
}

::ng-deep {
  .mat-autocomplete-panel {
    top: 9px;
    right: 12px;
  }
}

.invisible-input {
  position: absolute;
  top: -9999px;
}

.answer {
  max-height: 120px;
  padding: 0 8px;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .07);
  overflow: auto;

  &-container {
    margin-right: 10px;
    margin-bottom: 10px;
  }
}