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

.day-quick-pick {
  display: none;

  @include screen.mobile {
    display: flex;
    gap: vars.$space-m;
    margin-bottom: vars.$space-m;
  }

  &__btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: vars.$space-s2 vars.$space-m;
    background: colors.$white;
    border: 1px solid colors.$border;
    border-radius: vars.$border-radius;
    color: colors.$text-color;
    cursor: pointer;
    font: inherit;
    transition: border-color 0.2s, background-color 0.2s;

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

    &--selected {
      background: colors.$blue;
      color: colors.$white;
      border-color: colors.$blue;
    }
  }

  &__row {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }

  &__date {
    font-size: fonts.$font-size-xl2;
    font-weight: fonts.$font-medium;
    line-height: 1;
  }

  &__day {
    font-size: fonts.$font-size-s;
    line-height: 1;
    opacity: 0.85;
  }

  &__month {
    font-size: fonts.$font-size-s;
    line-height: 1;
    opacity: 0.85;
  }
}
