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

.reference-manager {
  max-width: 60em;
  margin: 0 auto;
  border-radius: 4px;
  .dark & {
    border: 1px solid colors.border-color(dark);
  }
  .light & {
    border: 1px solid colors.border-color(light);
  }

  .search {
    .fullwidth {
      width: 100%;
      font-size: 16px;
    }
    .mat-mdc-form-field-subscript-wrapper {
      display: none;
    }
    .mat-mdc-floating-label {
      .light & {
        color: colors.on-color-deemphasis(light);
      }
      .dark & {
        color: colors.on-color-deemphasis(dark);
      }
    }
  }

  .scroll-container {
    width: 100%;
    overflow: auto;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    table {
      flex: 1 0 auto;
      width: 100%;
      .dark & {
        border-bottom: 1px solid colors.border-color(dark);
      }
      .light & {
        border-bottom: 1px solid colors.border-color(light);
      }
      th,
      td {
        .light & {
          background: colors.color(light);
          border-color: colors.border-color(light);
        }
        .dark & {
          background: colors.color(dark);
          border-color: colors.border-color(dark);
        }
      }
      th {
        font-size: 20px;
        @extend .text-label;
      }

      tr:hover {
        cursor: pointer;
        .light & td {
          background: colors.color-alternate(light);
        }
        .dark & td {
          background: colors.color-alternate(dark);
        }
      }

      .mat-mdc-cell + .mat-cell,
      .mat-mdc-header-cell + .mat-header-cell {
        padding: 4px 4px 4px 12px;
      }

      .mat-mdc-cell.icon-cell {
        width: 24px;
        padding-right: 12px;
        .mat-icon {
          vertical-align: middle;
        }
        cursor: pointer;
        &:hover {
          .light & {
            background: colors.color-alternate(light);
          }
          .dark & {
            background: colors.color-alternate(dark);
          }
        }
      }
    }
  }
}
