@use 'sass:map';

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

$calendar-panel: () !default;
$calendar-panel: map.merge(
  (
    index-color-hover: value('content-color-base'),
    index-color-selected: value('color-white'),
    index-color-outside: value('content-color-disabled'),
    index-color-today: value('color-primary-base'),
    index-color-disabled: value('content-color-humble'),
    index-bg-color: transparent,
    index-bg-color-week: transparent,
    index-bg-color-hover: value('color-primary-opacity-7'),
    index-bg-color-selected: value('color-primary-base'),
    index-bg-color-disabled: value('calendar-index-bg-color'),
    index-bg-color-today: value('calendar-index-bg-color'),
    index-bg-color-outside: value('calendar-index-bg-color'),
    index-b-width: 0,
    index-b-style: value('border-style'),
    index-b-color: value('border-color-base'),
    index-b-color-selected: value('color-primary-opacity-2'),
    index-b-color-disabled: value('border-color-opacity-2'),
    index-b-color-outside: value('border-color-opacity-1'),
    index-size: 28px,
    index-border: value('calendar-index-b-width') value('calendar-index-b-style')
      value('calendar-index-b-color'),
    index-radius: value('radius-base'),
    range-bg-color: value('color-primary-opacity-8'),
    range-opacity: 60%
  ),
  $calendar-panel
);

.#{$namespace}-calendar {
  &-vars {
    @include define-preset-values('calendar', $calendar-panel);
  }

  &__panel {
    @include basis {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }

  &__action {
    display: flex;
  }

  &__row {
    display: flex;
    padding: 2px 0;
  }

  &__cell {
    display: flex;
    padding: 0 2px;
  }

  &__index {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: value('calendar-index-size');
    height: value('calendar-index-size');
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border-radius: value('calendar-index-radius');
    outline: 0;

    &-inner {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background-color: value('calendar-index-bg-color');
      border: value('calendar-index-border');
      border-radius: value('calendar-index-radius');
      transition: value('transition-color'), value('transition-background');
    }

    &--today &-inner {
      color: value('calendar-index-color-today');
      background-color: value('calendar-index-bg-color-today');
      border-color: value('calendar-index-b-color-today');
    }

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

    &:hover &-inner,
    &:focus &-inner {
      color: value('calendar-index-color-hover');
      background-color: value('calendar-index-bg-color-hover');
      border-color: value('calendar-index-b-color-hover');
    }

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

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

    &::before {
      position: absolute;
      inset: 2px -2px;
      display: none;
      pointer-events: none;
      content: '';
      background-color: value('calendar-range-bg-color');
      opacity: value('calendar-range-opacity');
    }

    &--in-range {
      &::before {
        display: block;
      }
    }
  }

  &__row--week &__index {
    cursor: default;

    &:hover {
      background-color: value('calendar-index-bg-color-week');
    }

    &::before,
    &:hover::before {
      display: none;
      content: none;
    }
  }
}