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

// Theme
+theme(v-select) using ($material)
  // Needs an explicit color to override
  // higher level color
  .v-select__selections
    color: map-deep-get($material, 'text', 'primary')

  &.v-input--is-disabled
    .v-select__selections
      color: map-deep-get($material, 'text', 'disabled')

  .v-chip--disabled,
  .v-select__selection--disabled
    color: map-deep-get($material, 'text', 'disabled')

  &.v-text-field--solo-inverted.v-input--is-focused
    .v-select__selections
      color: map-deep-get($material, 'inputs', 'solo-inverted-focused-text')

.v-select
  position: relative // For **attach** prop

  &:not(.v-select--is-multi).v-text-field--single-line
    .v-select__selections
      flex-wrap: nowrap

  & > .v-input__control > .v-input__slot
    cursor: pointer

  .v-chip
    flex: 0 1 auto
    margin: 4px

    &--selected:after
      opacity: .22

  .fade-transition-leave-active
    position: absolute
    left: 0

  &.v-input--is-dirty
    ::placeholder
      color: transparent !important

  &:not(.v-input--is-dirty)
    &:not(.v-input--is-focused)
      .v-text-field__prefix
          line-height: 20px
          position: absolute
          top: 7px
          transition: $primary-transition

  &.v-text-field--enclosed:not(.v-text-field--single-line):not(.v-text-field--outlined)
    .v-select__selections
      padding-top: 20px

  &.v-text-field--outlined:not(.v-text-field--single-line)
    .v-select__selections
      padding: 8px 0

    &.v-input--dense
      .v-select__selections
        padding: 4px 0

  &.v-text-field
    input
      flex: 1 1 // Doesn't resize on IE11 with 3rd param
      margin-top: 0
      min-width: 0
      pointer-events: none
      position: relative

  &.v-select--is-menu-active
    .v-input__icon--append .v-icon
      transform: rotate(180deg)

  &.v-select--chips
    input
      margin: 0

    .v-select__selections
      min-height: 42px

    &.v-input--dense
      .v-select__selections
        min-height: 40px

    // Explicit override since active chips
    // in select are not focused
    .v-chip--select.v-chip--active::before
      opacity: 0.2

    &.v-select--chips--small
      .v-select__selections
        min-height: 32px

    &:not(.v-text-field--single-line)
      &.v-text-field--box,
      &.v-text-field--enclosed
        .v-select__selections
          min-height: 68px

        &.v-input--dense
          .v-select__selections
            min-height: 40px

        &.v-select--chips--small
          .v-select__selections
            min-height: 56px

          &.v-input--dense
            .v-select__selections
              min-height: 38px


  &.v-text-field--reverse
    .v-select__slot,
    .v-select__selections
      flex-direction: row-reverse

  &__selections
    align-items: center
    display: flex
    flex: 1 1
    flex-wrap: wrap
    line-height: 18px
    max-width: 100%
    min-width: 0

  &__selection
    max-width: 90%

    &--comma
      margin: 7px 4px 7px 0
      overflow: hidden
      text-overflow: ellipsis
      white-space: nowrap

  &__slot
    position: relative
    align-items: center
    display: flex
    max-width: 100%
    width: 100%

  &:not(.v-text-field--single-line):not(.v-text-field--outlined)
    .v-select__slot
      // If an input is a direct child
      // there is no selections div
      // and we must move input to
      // the end of the container
      > input
        align-self: flex-end