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

v-overflow-btn($material)
  .v-input__control,
  .v-input__slot
    &::before
      background-color: $material.dividers !important // override v-text-field bottom border

  &--segmented,
  &--editable:hover,
  &--editable.v-input--is-focused,
  &--editable.v-select--is-menu-active
    .v-input__append-inner
      border-left: 1px solid $material.dividers

  &:hover,
  &.v-input--is-focused,
  &.v-select--is-menu-active
    .v-input__slot
      background: $material.cards

theme(v-overflow-btn, "v-overflow-btn")

.v-overflow-btn
  margin-top: 12px
  padding-top: 0;

  &:not(.v-overflow-btn--editable) > .v-input__control > .v-input__slot
    cursor: pointer

  .v-select__slot
    height: 48px

    input
      margin-left: 16px
      cursor: pointer

  .v-select__selection--comma:first-child
    margin-left: 16px

  .v-input__slot
    transition: .3s $transition.swing

    &::after
      content: none

  .v-label
    margin-left: 16px
    top: calc(50% - 10px)

  .v-input__append-inner
    width: 48px
    height: 48px
    align-self: auto
    align-items: center
    margin-top: 0
    padding: 0
    flex-shrink: 0

  .v-input__append-outer,
  .v-input__prepend-outer
    margin-top: 12px
    margin-bottom: 12px

  .v-input__control::before
    // TODO: move to mixin
    height: 1px
    top: -1px
    content: ''
    left: 0
    position: absolute
    transition: $primary-transition
    width: 100%

  &.v-input--is-focused,
  &.v-select--is-menu-active
    .v-input__slot
      elevation(2)

  .v-select__selections
    width: 0px

  &--segmented
    .v-select__selections
      flex-wrap: nowrap

      .v-btn
        border-radius: 0
        margin: 0
        margin-right: -16px // push past the input's padding
        height: 48px
        width: 100%

        &__content
          justify-content: start

          &::before
            background-color: transparent

  &--editable
    .v-select__slot
      input
        cursor: text

    .v-input__append-inner,
    .v-input__append-inner *
      cursor: pointer