@use '../../../../style/globals';
@use '../../../../style/colors';

.search-drawer {
  padding: 16px 0;
  .search-container {
    border-radius: 4px;
    .dark & {
      border: 1px solid colors.border-color(dark);
      border-bottom: none !important;
    }
    .light & {
      border: 1px solid colors.border-color(light);
      border-bottom: none !important;
    }

    .controls {
      font-size: 16px;
      .search {
        width: 100%;
      }
      .mat-mdc-form-field-subscript-wrapper {
        display: none; // remove bottom padding used for hint
      }
      .mat-mdc-text-field-wrapper {
        padding: 0 42px !important; // override default padding for alignment w/ table
      }
      .mat-mdc-floating-label {
        .light & {
          color: colors.on-color-deemphasis(light);
        }
        .dark & {
          color: colors.on-color-deemphasis(dark);
        }
      }
    }

    .search-results {
      .empty-list {
        .dark & {
          border-bottom: 1px solid colors.border-color(dark);
        }
        .light & {
          border-bottom: 1px solid colors.border-color(light);
        }
      }
      .results-list {
        .dark & {
          border-bottom: 1px solid colors.border-color(dark);
        }
        .light & {
          border-bottom: 1px solid colors.border-color(light);
        }
        .result {
          .dark & {
            border-top: 1px solid colors.border-color(dark);
          }
          .light & {
            border-top: 1px solid colors.border-color(light);
          }
        }
        .description {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3; /* number of lines to show */
          -webkit-box-orient: vertical;
          p {
            margin-top: 0;
          }
        }
        .text-label {
          font-size: 13px;
        }
      }
      a {
        cursor: pointer;
      }
    }
    .col {
      padding: 6px;
      justify-content: center;
      mat-icon {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .clickable {
      cursor: pointer;
      &:hover {
        .dark & {
          background: colors.color-alternate(dark);
        }
        .light & {
          background: colors.color-alternate(light);
        }
      }
    }
  }
  .warning {
    color: colors.color(error);
  }
}
