@use 'sass:math';
@use '../core/tokens/token-utils';
@use '../core/tokens/m2/mtx/datetimepicker' as tokens-mtx-datetimepicker;

$calendar-body-label-padding-start: 5% !default;
$calendar-body-label-side-padding: math.div(33%, 7) !default;
$calendar-body-cell-min-size: 32px !default;
$calendar-body-cell-size: math.div(100%, 7) !default;
$calendar-body-cell-padding: math.div($calendar-body-cell-size, 2) !default;
$calendar-body-cell-content-margin: 5% !default;
$calendar-body-cell-content-border-width: 1px !default;
$calendar-body-cell-radius: 999px !default;

$calendar-body-min-size: 7 * $calendar-body-cell-min-size !default;
$calendar-body-cell-content-size: 100% - $calendar-body-cell-content-margin * 2 !default;

$_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token-slots();

// Styles for a highlighted calendar cell (e.g. hovered or focused).
@mixin _highlighted-cell($token-name) {
  &>.mtx-calendar-body-cell-content {
    @include _unselected-cell {
      @include token-utils.create-token-slot(background-color, $token-name);
    }
  }
}

// Utility mixin to target cells that aren't selected. Used to make selector easier to follow.
@mixin _unselected-cell {
  &:not(.mtx-calendar-body-selected) {
    @content;
  }
}

.mtx-calendar-body {
  min-width: $calendar-body-min-size;
}

.mtx-calendar-body-today {
  @include _unselected-cell {
    @include token-utils.use-tokens($_tokens...) {
      @include token-utils.create-token-slot(border-color, calendar-date-today-outline-color);
    }
  }
}

.mtx-calendar-body-label {
  height: 0;
  line-height: 0;
  text-align: left;
  padding: $calendar-body-cell-padding $calendar-body-label-side-padding;

  @include token-utils.use-tokens($_tokens...) {
    @include token-utils.create-token-slot(font-size, calendar-body-label-text-size);
    @include token-utils.create-token-slot(font-weight, calendar-body-label-text-weight);
    @include token-utils.create-token-slot(color, calendar-body-label-text-color);
  }

  [dir='rtl'] & {
    text-align: right;
  }
}

.mtx-calendar-body-cell {
  position: relative;
  width: $calendar-body-cell-size;
  height: 0;
  line-height: 0;
  padding: $calendar-body-cell-padding 0;
  text-align: center;
  outline: none;
  cursor: pointer;
}

.mtx-calendar-body-disabled {
  cursor: default;
  pointer-events: none;

  @include token-utils.use-tokens($_tokens...) {
    >.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected) {
      @include token-utils.create-token-slot(color, calendar-date-disabled-state-text-color);
    }

    >.mtx-calendar-body-today:not(.mtx-calendar-body-selected) {
      @include token-utils.create-token-slot(border-color, calendar-date-disabled-state-text-color);
    }
  }
}

.mtx-calendar-body-cell-content {
  position: absolute;
  top: $calendar-body-cell-content-margin;
  left: $calendar-body-cell-content-margin;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: $calendar-body-cell-content-size;
  height: $calendar-body-cell-content-size;
  border: $calendar-body-cell-content-border-width solid transparent;
  border-radius: $calendar-body-cell-radius;

  @include token-utils.use-tokens($_tokens...) {
    @include token-utils.create-token-slot(color, calendar-date-text-color);
    @include token-utils.create-token-slot(border-color, calendar-date-outline-color);
  }
}

// TODO: cdk-keyboard-focused, cdk-program-focused
.mtx-calendar-body-active {
  @include token-utils.use-tokens($_tokens...) {
    @include _highlighted-cell(calendar-date-focus-state-background-color);
  }
}

@media (hover: hover) {
  .mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover {
    @include token-utils.use-tokens($_tokens...) {
      @include _highlighted-cell(calendar-date-hover-state-background-color);
    }
  }
}

.mtx-calendar-body-selected {
  @include token-utils.use-tokens($_tokens...) {
    @include token-utils.create-token-slot(background-color, calendar-date-selected-state-background-color);
    @include token-utils.create-token-slot(color, calendar-date-selected-state-text-color);

    .mtx-calendar-body-disabled>& {
      @include token-utils.create-token-slot(background-color, calendar-date-selected-disabled-state-background-color);
    }

    &.mtx-calendar-body-today {
      $shadow-color: token-utils.get-token-variable(calendar-date-today-selected-state-outline-color);

      box-shadow: inset 0 0 0 1px #{$shadow-color};
    }
  }
}