@use "sass:map";
@use "sass:color";
@use "sass:math";
@use "../variables" as *;
@use "../maps" as *;
@use "../../util/scss/add-rules.scss" as *;
@use "../../util/scss/clockwise.scss" as *;
@use "../../util/scss/deep-merge.scss" as *;
@use "../../util/scss/besm.scss" as *;
@use "../../util/scss/include.scss" as *;
@use "./Field.scss" as *;

@mixin cx-monthpicker(
   $name: "monthpicker",
   $state-style-map: $cx-monthpicker-state-style-map,
   $cell-style-map: $cx-monthpicker-cell-state-style-map,
   $besm: $cx-besm
) {
   $block: map.get($besm, block);
   $element: map.get($besm, element);
   $state: map.get($besm, state);

   .#{$block}#{$name} {
      display: inline-block;
      overflow-y: scroll;
      overflow-x: hidden;
      min-height: 10em;
      max-height: 30em;
      height: 100%;
      position: relative;
      overflow-anchor: none;
      touch-action: pan-y;
      vertical-align: top;

      @include cx-add-state-rules($state-style-map, default);

      &:focus {
         @include cx-add-state-rules($state-style-map, focus);
      }

      table {
         border-spacing: 0;
         width: 100%;
         font-size: inherit;
      }

      $border-color: cx-get-state-rule($state-style-map, default, border-color);

      th,
      td {
         border-top: 1px solid
            color-mix(in srgb, $border-color 50%, transparent);
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      }

      tbody:not(:first-child) {
         tr:first-child {
            th,
            td {
               border-top: 1px solid $border-color;
            }
         }
      }

      th,
      td {
         text-align: center;
         cursor: pointer;
         -webkit-user-select: none;
         -ms-user-select: none;
         -moz-user-select: none;
         user-select: none;
         @include cx-add-state-rules($cell-style-map, default);
      }

      th {
         padding: 0 0.5em;
         @include cx-add-state-rules($cell-style-map, quarter);
      }

      td:hover,
      th:hover {
         @include cx-add-state-rules($cell-style-map, hover);
      }

      th.#{$state}unselectable {
         @include cx-add-state-rules($cell-style-map, disabled);
      }

      .#{$element}#{$name}-year {
         @include cx-add-state-rules($cell-style-map, year);
      }

      td.#{$state}outside {
         @include cx-add-state-rules($cell-style-map, outside);
      }

      td.#{$state}unselectable {
         @include cx-add-state-rules($cx-list-item, disabled);
      }

      td.#{$state}selected {
         border-color: transparent;
         @include cx-add-state-rules($cell-style-map, selected);
      }

      &:focus {
         td.#{$state}cursor,
         th.#{$state}cursor {
            @include cx-add-state-rules($cx-list-item, cursor);

            &.#{$state}selected {
               border-color: transparent;
               @include cx-add-state-rules($cell-style-map, selected-cursor);
            }
         }
      }

      td.#{$state}handle {
         touch-action: none;
      }
   }

   .#{$block}#{$name}.#{$state}disabled {
      background-color: transparent;
      border-color: transparent;
      color: color.adjust(#fff, $lightness: -18%);
      pointer-events: none;
   }
}

@if (cx-should-include("cx/widgets/MonthPicker")) {
   @include cx-monthpicker();
}