@use '../../styles/settings'
@use '../../styles/tools'
@use './variables' as *

@include tools.layer('components')
  .v-month-picker
    width: $month-picker-width

    > .v-picker__body
      flex-direction: column

    .v-date-picker-years
      flex-grow: 1

    .v-date-picker-years__content
      width: 100%
      grid-template-columns: repeat(var(--v-month-picker-years-columns, 4), 1fr)
      padding: $month-picker-content-padding

      > .v-btn
        padding: $month-picker-cell-padding

    &__controls
      display: flex
      justify-content: space-between
      align-items: center
      flex-grow: 1
      padding: 12px 12px 0

      .v-btn > .v-btn__append > .v-icon
        transition-property: transform
        transition-duration: 0.28s
        transition-timing-function: settings.$standard-easing

    &--years
      .v-month-picker__controls .v-btn > .v-btn__append > .v-icon
        transform: rotate(180deg)

    &__months
      position: relative
      overflow: hidden

      &-content
        width: 100%
        padding: $month-picker-content-padding

    &--list
      .v-month-picker__months
        overflow-y: auto
        max-height: $month-picker-list-max-height

      .v-month-picker__months-content
        padding: 0px

      .v-month-picker__month
        padding: 0px

        > .v-btn
          justify-content: start
          height: $month-picker-list-item-height

        &:not(&--selected) > .v-btn
          padding-inline-start: $month-picker-list-item-prepend-size

    &__months-row
      display: grid
      grid-template-columns: repeat(var(--v-month-picker-months-columns, 4), 1fr)

  .v-month-picker__month
    display: flex
    align-items: center
    justify-content: center
    position: relative
    padding: $month-picker-cell-padding
    --range-selection-rounding: #{$month-picker-range-selection-border-radius}
    --range-selection-inset: #{$month-picker-range-selection-inset}

    .v-month-picker--list &
      --range-selection-rounding: 0px
      --range-selection-inset: 0px

    > .v-btn
      width: 100%

    @include tools.layer('trumps')
      @media (forced-colors: active)
        &--current
          > .v-btn
            border-color: buttontext !important

        &--selected:not(&--range-middle),
        &--range-start,
        &--range-end
          > .v-btn
            border-color: highlight !important
            background: none !important

    &--range-start,
    &--range-end,
    &--preview-start,
    &--preview-end
      > .v-btn
        position: relative
        z-index: 1

    &--selected
      .v-btn
        background-color: rgb(var(--v-theme-surface-variant))
        color: rgb(var(--v-theme-on-surface-variant))

    .v-month-picker__range-bg
      position: absolute
      inset: var(--range-selection-inset) 0
      pointer-events: none
      background-color: rgb(var(--v-theme-surface-variant))

      @include tools.layer('trumps')
        @media (forced-colors: active)
          background-color: highlight !important
          opacity: 0.2

      &--range
        opacity: $month-picker-range-selection-opacity

      &--preview
        opacity: $month-picker-preview-selection-opacity

    &--range-start > .v-month-picker__range-bg
      left: var(--range-selection-inset)
      border-radius: var(--range-selection-rounding) 0 0 var(--range-selection-rounding)

    &--range-end > .v-month-picker__range-bg
      right: var(--range-selection-inset)
      border-radius: 0 var(--range-selection-rounding) var(--range-selection-rounding) 0

    &--preview-start > .v-month-picker__range-bg
      left: var(--range-selection-inset)
      border-radius: var(--range-selection-rounding) 0 0 var(--range-selection-rounding)

    &--preview-end > .v-month-picker__range-bg
      right: var(--range-selection-inset)
      border-radius: 0 var(--range-selection-rounding) var(--range-selection-rounding) 0

    &--range-middle,
    &--range-start,
    &--preview-middle,
    &--preview-start
      &:last-of-type > .v-month-picker__range-bg
        right: var(--range-selection-inset)
        border-top-right-radius: var(--range-selection-rounding)
        border-bottom-right-radius: var(--range-selection-rounding)

    &--range-middle,
    &--range-end,
    &--preview-middle,
    &--preview-end
      &:first-of-type > .v-month-picker__range-bg
        left: var(--range-selection-inset)
        border-top-left-radius: var(--range-selection-rounding)
        border-bottom-left-radius: var(--range-selection-rounding)