@import '~@kaizen/design-tokens/sass/color';
@import '~@kaizen/design-tokens/sass/spacing';

@layer kz-components {
  $cell-border-radius: 3px;

  .month {
    padding: 0 $spacing-sm;

    &:nth-of-type(1) {
      padding-inline-start: 0;
    }

    &:last-child {
      padding-inline-end: 0;
    }
  }

  .monthWithDivider {
    position: relative;
    padding: 0 $spacing-md;

    &:not(:nth-of-type(1)) {
      &::before {
        position: absolute;
        content: '';
        inset: calc(-1 * #{$spacing-md}) 0;
        border-inline-start: 1px solid $color-gray-300;
      }
    }

    &:nth-of-type(1) {
      padding-inline-start: 0;
    }

    &:last-child {
      padding-inline-end: 0;
    }
  }

  .nav {
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: $color-purple-800;
    top: -0.25rem;
  }

  .dayRangeStart,
  .dayRangeEnd {
    background-color: $color-blue-500;
    color: $color-white;
  }

  .dayRangeMiddle {
    background-color: $color-blue-100;
    color: $color-blue-500;

    & [class*='_button_'] {
      color: $color-blue-500;
    }
  }

  .hidden {
    background-color: transparent;
  }

  .chevronIcon {
    pointer-events: none;
  }
}