@import '../bootstrap'
@import '../theme'

v-date-picker-header($material)
  .v-date-picker-header__value:not(.v-date-picker-header__value--disabled)
    strong:not(:hover)
      color: $material.text.primary !important

  .v-date-picker-header__value--disabled strong
    color: $material.text.disabled

theme(v-date-picker-header, "v-date-picker-header")

.v-date-picker-header
  padding: 4px 16px

  align-items: center
  display: flex
  justify-content: space-between
  position: relative

  .v-btn
    margin: 0
    z-index: auto

  .v-icon
    cursor: pointer
    user-select: none

.v-date-picker-header__value
  flex: 1
  text-align: center
  position: relative
  overflow: hidden

  strong
    cursor: pointer
    transition: $primary-transition
    display: block
    width: 100%