/*
 * Backpack - Skyscanner's Design System
 *
 * Copyright 2016-2021 Skyscanner Ltd
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import '~bpk-mixins/index';

.bpk-calendar-date {
  width: $bpk-calendar-day-size;
  height: $bpk-calendar-day-size;
  padding: 0;
  border: none;
  border-radius: $bpk-border-radius-pill;
  background-color: transparent;
  font-size: $bpk-font-size-base;
  text-align: center;
  cursor: pointer;
  appearance: none;
  box-sizing: border-box;

  @include bpk-themeable-property(
    color,
    --bpk-calendar-date-text-color,
    $bpk-calendar-day-color
  );

  @include bpk-hover {
    &:not(.bpk-calendar-date--selected) {
      background-color: $bpk-calendar-day-hover-background-color;

      @include bpk-themeable-property(
        color,
        --bpk-calendar-date-text-hover-color,
        $bpk-calendar-day-hover-color
      );
    }
  }

  &--colored {
    color: $bpk-color-white;

    &-default {
      background-color: $bpk-color-sky-gray-tint-02;
    }

    &-positive {
      background-color: $bpk-color-monteverde;
    }

    &-neutral {
      background-color: $bpk-color-erfoud;
    }

    &-negative {
      background-color: $bpk-color-panjin;
    }
  }

  &:not(.bpk-calendar-date--selected):active {
    background-color: $bpk-calendar-day-active-background-color;

    @include bpk-themeable-property(
      color,
      --bpk-calendar-date-text-active-color,
      $bpk-calendar-day-active-color
    );
  }

  &--outside {
    background-color: transparent;
    color: $bpk-calendar-day-outside-color;
  }

  &--today {
    font-weight: bold;
  }

  &--selected {
    font-weight: bold;
    cursor: default;

    @include bpk-themeable-property(
      background-color,
      --bpk-calendar-date-selected-background-color,
      $bpk-calendar-day-selected-background-color
    );
    @include bpk-themeable-property(
      color,
      --bpk-calendar-date-text-selected-color,
      $bpk-calendar-day-selected-color
    );
  }

  &--focused:not(:disabled):not(.bpk-calendar-date--selected) {
    &:not(.bpk-calendar-date--colored) {
      box-shadow: 0 0 0 2px $bpk-calendar-day-focused-border-color inset;
      box-shadow: 0 0 0 2px
        var(
          --bpk-calendar-date-focused-border-color,
          $bpk-calendar-day-focused-border-color
        )
        inset;

      @include bpk-themeable-property(
        color,
        --bpk-calendar-date-text-focus-color,
        $bpk-calendar-day-focused-color
      );
    }

    &.bpk-calendar-date--colored {
      border: ($bpk-spacing-xs / 2) solid $bpk-calendar-day-focused-border-color;
      box-shadow: 0 0 0 1px $bpk-color-white inset;
    }
  }

  &:disabled,
  &--blocked {
    background-color: transparent;
    color: $bpk-calendar-day-disabled-color;
    cursor: not-allowed;

    @include bpk-hover {
      color: $bpk-calendar-day-disabled-color;
    }

    &:active {
      color: $bpk-calendar-day-disabled-color;
    }
  }
}