@use 'sass:math';
@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$calendar: () !default;
$calendar: map.merge(
  (
    header-height: 50px,
    date-color-today: value('color-primary-base'),
    date-color-outside: value('content-color-disabled'),
    date-color-disabled: value('content-color-humble'),
    date-bg-color: transparent,
    date-bg-color-hover: value('color-primary-opacity-9'),
    date-bg-color-selected: value('color-primary-opacity-8'),
    date-bg-color-disabled: value('calendar-date-bg-color'),
    date-bg-color-outside: value('calendar-date-bg-color'),
    date-b-width: 2px,
    date-b-style: value('border-style'),
    date-b-color: value('border-color-base'),
    date-b-color-selected: value('color-primary-light-2'),
    date-b-color-disabled: value('border-color-light-2'),
    date-b-color-outside: value('border-color-light-1'),
    date-border: value('calendar-date-b-width') value('calendar-date-b-style')
      value('calendar-date-b-color'),
    content-height: 90px,
    content-v-padding: 4px,
    content-h-padding: 4px
  ),
  $calendar
);

@use './calendar-panel' with (
  $calendar-panel: $calendar
);

.#{$namespace}-calendar {
  @include basis(false) {
    width: 100%;
  }

  &__header {
    width: 100%;
    height: value('calendar-header-height');
    padding-bottom: 10px;
  }

  &__actions {
    display: flex;
    align-items: center;
  }

  &__year-input {
    min-width: 100px;
    margin-inline-end: 14px;
  }

  &__month-input {
    min-width: 80px;
  }

  &__body,
  &__row {
    width: 100%;
  }

  &__cell {
    width: math.div(1, 7) * 100%;
  }

  &__week {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    padding: 2px 4px;

    &-value {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: value('calendar-index-size');
      height: value('calendar-index-size');
    }
  }

  &__date {
    width: 100%;
    padding: 4px 4px 0;
    margin: 0 2px;
    cursor: pointer;
    background-color: value('calendar-date-bg-color');
    border-top: value('calendar-date-border');
    outline: 0;
    transition:
      value('transition-color'), value('transition-background'), value('transition-border');

    &:hover,
    &:focus {
      background-color: value('calendar-date-bg-color-hover');
    }

    &--today {
      color: value('calendar-date-color-today');
    }

    &--prev,
    &--next {
      color: value('calendar-date-color-outside');
      background-color: value('calendar-date-bg-color-outside');
      border-top-color: value('calendar-date-b-color-outside');
    }

    &--selected {
      &,
      &:hover,
      &:focus {
        background-color: value('calendar-date-bg-color-selected');
        border-top-color: value('calendar-date-b-color-selected');
      }
    }

    &--disabled {
      &,
      &:hover,
      &:focus {
        color: value('calendar-date-color-disabled');
        cursor: not-allowed;
        background-color: value('calendar-date-bg-color-disabled');
        border-top-color: value('calendar-date-b-color-disabled');
      }
    }

    &-header {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: value('calendar-index-size');
      user-select: none;
    }

    &-value {
      display: flex;
      align-items: center;
      justify-content: center;
      width: value('calendar-index-size');
    }

    &-content {
      height: value('calendar-content-height');
      padding: value('calendar-content-v-padding') value('calendar-content-h-padding');
      overflow: auto;
    }
  }
}