/**
 * Styles mirror Angular's `schedule-search-result-header.scss`:
 * - Flex row, padding 0 20px, h-spacing 10px between cells.
 * - Each cell is 56px tall (big-button-height), 12px uppercase gray text.
 * - Sort buttons 12×12 px, 30% opacity faded, border on active.
 * - Asterisk note (`*`) absolutely positioned top-right of the label.
 */

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

.schedule-col-header {
  display: flex;
  align-items: center;
  padding: 0 vars.$space-xl;
  background: colors.$white;

  // 10px horizontal gap between cells (h-spacing $space-m in Angular).
  > div + div {
    margin-left: 10px;
  }

  // When placed inside the sticky card directly after the week-tabs,
  // the week-tabs bottom margin / card padding shouldn't pad the cell.
  // Kill any margin-top so it sits flush.
  margin-top: 0;

  &__flight {
    width: 80px;
  }

  &__company {
    width: 120px;
  }

  &__departure,
  &__arrival {
    flex: 1;
    display: flex;
    align-items: center;
  }

  &__time {
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__label {
    font-size: 12px;
    font-family: fonts.$font-family;
    font-weight: fonts.$font-regular;
    color: colors.$gray;
    text-transform: uppercase;
    line-height: normal;
    display: flex;
    align-items: center;
    height: 56px;

    &--note {
      position: relative;
      padding-right: 10px;
    }
  }

  &__note {
    position: absolute;
    top: 8px;
    right: 0;
    font-size: 10px;
    color: colors.$gray;
  }

  &__sort-container {
    margin-left: 5px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  &__sort {
    width: 12px;
    height: 12px;
    min-height: 0; // override global `button { min-height: 35px }`
    min-width: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: colors.$white;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    color: colors.$gray;
    opacity: 0.3;
    line-height: 0;
    transition: opacity 0.15s, border-color 0.15s;

    svg {
      display: block;
      width: 10px;
      height: 10px;
    }

    &:hover {
      opacity: 0.8;
      border-color: colors.$border;
    }

    &--active {
      opacity: 0.7;
      border-color: #002776;
    }
  }
}
