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

.schedule-filter {
  &__frame {
    background: colors.$white;
    border-radius: vars.$border-radius;
    @include shadows.box-shadow-small;
  }

  &__form {
    padding: vars.$space-l vars.$space-xl vars.$space-xl;
  }

  .filter-content {
    display: flex;
    flex-direction: column;
    gap: vars.$space-l;
  }

  .validation-tooltip {
    background-color: colors.$red;
    color: colors.$white;
    padding: vars.$space-s vars.$space-m;
    border-radius: vars.$border-radius;
    font-size: fonts.$font-size-s;
    margin-top: calc(vars.$space-l * -1);
    position: relative;
  }

  // Mirrors Angular `.label--filter` on the filter sidebar
  // (`src/styles/pages/board/components/page-filters.scss` in ClientApp):
  // 12px regular text in $gray with a $label-margin-bottom (10px) gutter.
  // Previously Schedule used $light-gray + 4px, which drifted from the
  // OnlineBoard + FlightsMap sidebars.
  .label--filter {
    display: block;
    @include fonts.font-small(colors.$gray);
    margin-bottom: vars.$label-margin-bottom;
  }

  .input--filter {
    width: 100%;
  }

  // Swap-cities button moved to the shared `SwapCityButton` component —
  // classes `.change-container` + `.button-change` are now global.

  &__checkbox {
    display: flex;
    align-items: center;
    gap: vars.$space-s2;
    padding: 4px 0;
    cursor: pointer;
    font-size: 13px;
    color: colors.$text-color;

    input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: colors.$blue;
      cursor: pointer;
    }
  }

  // Time selector — borrowed from OnlineBoardFilter compact-view styles.
  .wrapper--time-selector {
    display: flex;
    flex-direction: column;
    gap: vars.$space-s2;
  }

  .time-selector__label-value {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }

  .time-selector__label {
    font-size: fonts.$font-size-s;
    color: colors.$light-gray;
  }

  .time-selector__value {
    font-size: fonts.$font-size-s;
    color: colors.$text-color;
    font-weight: fonts.$font-medium;
  }

  .calendar-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;

    .p-calendar {
      flex: 1;
    }

    .calendar-clear-btn {
      position: absolute;
      // Place X to the left of the calendar icon (icon is ~38px wide)
      right: 38px;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: colors.$light-gray;
      font-size: fonts.$font-size-xl;
      cursor: pointer;
      padding: 0;
      line-height: 1;

      &:hover {
        color: colors.$text-color;
      }
    }
  }

  .filter-button {
    margin-top: vars.$space-l;
  }

  // Mirrors Angular `.search-button.color.blue-light`: 48px tall pill
  // with $blue-light background and $blue-light--hover on hover.
  .search-button {
    width: 100%;
    height: vars.$standard-button-height;
    background: colors.$blue-light;
    color: colors.$white;
    border: none;
    border-radius: vars.$border-radius;
    padding: 0 vars.$space-l;
    font-size: fonts.$font-size-m;
    font-weight: fonts.$font-bold;
    cursor: pointer;
    transition: background-color 0.2s ease;

    &:hover { background: colors.$blue-light--hover; }
  }
}
