calcite-date-picker-month-header.scss

:host {
  @apply block;
}

.header {
  @apply flex justify-between;
  @apply py-0 px-1;
}

:host([scale="s"]) {
  .text {
    @apply text--1h my-2;
  }
  .chevron {
    @apply h-9;
  }
}

:host([scale="m"]) {
  .text {
    @apply text-0h my-3;
  }
  .chevron {
    @apply h-12;
  }
}

:host([scale="l"]) {
  .text {
    @apply text-1h my-4;
  }
  .chevron {
    // @apply h-16;
    height: 3.5rem;
  }
}

.chevron {
  @apply text-color-3
    flex-grow-0
    box-content
    outline-none
    px-1
    -mx-1
    border-none
    flex
    items-center
    justify-center
    bg-foreground-1
    cursor-pointer
    transition-all
    duration-150
    ease-in-out
    focus-base;
  width: calc(100% / 7);

  &:focus {
    @apply focus-inset;
  }

  &:hover,
  &:focus {
    @apply text-color-1 bg-foreground-2 fill-color-1;
  }

  &:active {
    @apply bg-foreground-3;
  }

  &[aria-disabled="true"] {
    @apply pointer-events-none opacity-0;
  }
}

.text {
  @apply flex-auto
    items-center
    justify-center
    leading-none
    my-auto
    text-center
    w-full;
}

.text--reverse {
  @apply flex-row-reverse;
}

.month,
.year,
.suffix {
  @apply text-color-1
    bg-foreground-1
    font-medium
    leading-tight
    mx-1
    my-auto
    inline-block;
  font-size: inherit;
}

.year {
  @apply font-inherit
    text-center
    border-none
    w-12
    bg-transparent
    relative
    focus-base;
  z-index: 2;
  &:hover {
    @apply duration-100 ease-in-out;
    transition-property: outline-color;
    outline: 2px solid var(--calcite-ui-border-2);
    outline-offset: 2px;
  }
  &:focus {
    @apply focus-outset;
  }
}

.year--suffix {
  @apply w-16 text-left;
}

.year-wrap {
  @apply relative;
}

.suffix {
  @apply absolute
    w-16
    whitespace-nowrap
    text-left
    top-0
    left-0;
}

.suffix__invisible {
  @apply invisible;
}