/*
 * Backpack - Skyscanner's Design System
 *
 * Copyright 2016 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.scss';

$bpk-spacing-v2: true;

.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;
  text-align: center;
  cursor: pointer;
  appearance: none;
  box-sizing: border-box;

  @include bpk-label-1;
  @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
      );
    }
  }

  &: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;
  }

  &--selected {
    cursor: default;

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

  &--middle {
    background-color: $bpk-surface-highlight-day;
    color: $bpk-text-primary-day;
  }

  &--single {
    background-color: $bpk-core-accent-day;
  }

  &--start {
    background-color: $bpk-core-accent-day;
  }

  &--end {
    background-color: $bpk-core-accent-day;
  }

  &--focused:not(:disabled):not(.bpk-calendar-date--selected) {
    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
    );
  }

  &: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;
    }
  }
}