@use "../../../styles/colors" as colors;
@use "../../../styles/variables" as vars;
@use "../../../styles/fonts" as fonts;

// Mirrors Angular's `date-tabs` + `tab-button` (see ClientApp/src/app/
// toolkit/date-tabs/*). Each tab is a flat rectangle on $blue-extra-light
// with a 1px border-right between siblings and a 1px border-bottom along
// the row; the active tab is white with no bottom border so it visually
// "merges" into the content below. Carousel-style chevron arrows sit at
// each end (top-rounded outer corner, $blue-extra-light fill).
.week-tabs {
  display: flex;
  align-items: stretch;

  // When week-tabs sits directly above the column-header row inside the
  // sticky card (Angular parity layout), cancel the bottom margin so the
  // two rows sit flush together.
  &:has(+ .schedule-col-header),
  &:has(+ .schedule-direction-switch + .schedule-col-header) {
    margin-bottom: 0;
  }

  &__nav {
    flex: 0 0 50px;
    width: 50px;
    max-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: colors.$blue-extra-light;
    border: none;
    border-bottom: 1px solid colors.$border;
    color: colors.$blue;
    cursor: pointer;
    // Override the global `button { min-height: 35px }` so we can hit
    // the Angular 48px row height precisely.
    min-height: 0;
    height: 48px;
    line-height: 0;
    transition: opacity 0.15s;

    svg { display: block; }

    &:hover:not(:disabled) {
      background: colors.$blue-icon;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    &--prev {
      border-top-left-radius: vars.$border-radius;
    }

    &--next {
      border-top-right-radius: vars.$border-radius;
    }
  }

  &__list {
    display: flex;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  &__tab {
    flex: 1;
    min-width: 0;
    padding: 0 vars.$space-m2;
    height: 48px;
    max-height: 48px;
    // Override the global `button { min-height: 35px }`.
    min-height: 0;
    background: colors.$blue-extra-light;
    border: none;
    border-right: 1px solid colors.$border;
    border-bottom: 1px solid colors.$border;
    border-radius: 0;
    font-size: 12px;
    font-weight: fonts.$font-medium;
    color: colors.$blue;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: background 0.2s;

    &:hover:not(:disabled):not(&--active) {
      background: colors.$blue-icon;
    }

    &--active {
      background: colors.$white;
      // Hide the bottom border so the active tab visually merges into
      // the column-header / table below it (Angular parity).
      border-bottom-color: colors.$white;
      color: colors.$blue-dark;
      font-weight: fonts.$font-bold;
      cursor: default;
    }

    // Inactive placeholder tabs padded to fill the last page to 7.
    &--placeholder {
      opacity: 0;
      pointer-events: none;
      cursor: default;
    }
  }
}
