@import '../../styles/styles.sass'

// Theme
+theme(v-overflow-btn) using ($material)
  .v-input__control,
  .v-input__slot
    &::before
      background-color: map-get($material, 'dividers') !important // override v-text-field bottom border

  &.v-text-field--outline
    .v-input__control,
    .v-input__slot
      &::before
        background-color: transparent !important // override v-text-field top border

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

  &:hover,
  &.v-input--is-focused,
  &.v-select--is-menu-active
    .v-input__slot
      background: map-get($material, 'cards')

.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

  &.v-input--dense
    .v-select__slot
      height: 38px

    input
      margin-left: 16px
      cursor: pointer

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

  .v-input__slot
    transition: .3s map-get($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