@import '~@kaizen/design-tokens/sass/typography';
@import '~@kaizen/design-tokens/sass/color';
@import '~@kaizen/design-tokens/sass/spacing';
@import '~@kaizen/design-tokens/sass/border';
@import '../../styles/utils/button-reset';

@layer kz-components {
  $button-border-radius: 3px;
  $rdp-cell-size: 40px;

  %focus-ring {
    position: relative;

    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: none;

      &::after {
        $focus-ring-offset: calc(-1 * calc((#{$border-focus-ring-border-width} * 2) + 1px));

        z-index: 2;
        content: '';
        position: absolute;
        inset: $focus-ring-offset;
        border-radius: $button-border-radius;
      }
    }
  }

  %focus-ring--enabled {
    @extend %focus-ring;

    &:focus-visible {
      &::after {
        border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
      }
    }
  }

  .root {
    display: inline-flex;
    position: relative;
  }

  .months {
    display: flex;
  }

  .buttonReset {
    @include button-reset;
  }

  .button {
    cursor: pointer;
  }

  .caption {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 $spacing-xs;
  }

  .captionLabel {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0 0.25em;
    white-space: nowrap;
    font-family: $typography-heading-4-font-family;
    font-size: $typography-heading-4-font-size;
    font-weight: $typography-heading-5-font-weight;
    line-height: $typography-heading-4-line-height;
    letter-spacing: $typography-heading-4-letter-spacing;
    color: $color-purple-800;
  }

  .navButton {
    @extend %focus-ring--enabled;

    display: inherit;
    padding: 0.25rem $spacing-xs;
    border: $border-solid-border-width $border-solid-border-style transparent;
    border-radius: $button-border-radius;

    &:hover {
      background-color: $color-blue-100;
      color: $color-blue-500;
    }

    &:focus-visible {
      background-color: $color-blue-100;
      color: $color-blue-500;
    }
  }

  .table {
    border-collapse: separate;
    border-spacing: 1px;
    margin: 0;
    max-width: calc(#{$rdp-cell-size} * 7);
  }

  .tbody {
    border: 0;
    font-family: $typography-paragraph-body-font-family;
    font-size: $typography-paragraph-body-font-size;
    letter-spacing: $typography-paragraph-body-letter-spacing;
    font-weight: $typography-paragraph-body-font-weight;
    line-height: $typography-paragraph-body-line-height;
  }

  .weekday {
    padding: 0.5rem 0;
    font-family: $typography-paragraph-body-font-family;
    font-size: $typography-paragraph-body-font-size;
    letter-spacing: $typography-paragraph-body-letter-spacing;
    font-weight: $typography-paragraph-body-font-weight;
    line-height: $typography-paragraph-body-line-height;
    color: $color-purple-800;
  }

  .cell {
    width: $rdp-cell-size;
    height: $rdp-cell-size;
    padding: 0;
    text-align: center;
  }

  .day {
    @extend %focus-ring--enabled;

    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: $rdp-cell-size;
    max-width: $rdp-cell-size;
    height: $rdp-cell-size;
    margin: 0;
    border: $border-borderless-border-width $border-borderless-border-style
      $border-borderless-border-color;
    border-radius: $button-border-radius;
    padding: calc(#{$spacing-md} / 3) 0.625rem;
    color: $color-purple-800;

    &:hover {
      background-color: $color-blue-100;
      color: $color-blue-500;
    }

    &:focus-visible {
      background-color: $color-blue-100;
      color: $color-blue-500;
    }
  }

  .dayToday {
    color: $color-blue-500;
    font-weight: bold;
  }

  .daySelected {
    background-color: $color-blue-500;
    border-radius: $button-border-radius;
    color: $color-white;

    & .button {
      color: $color-white;

      &:hover,
      &:focus-visible {
        background-color: $color-blue-400;
        color: $color-white;
      }
    }
  }

  .dayDisabled {
    // Focus ring styles have been removed as react-day-picker has been updated such that
    // disabled days do not receive focus, and keyboard navigation only lands on available days.
    // https://github.com/gpbl/react-day-picker/pull/1519
    // https://github.com/gpbl/react-day-picker/issues/1449#issuecomment-1149942033
    background: none;
    pointer-events: none;

    & [class*='_button_'] {
      color: rgba($color-purple-800-rgb, 0.3);
    }
  }
}