@import '../styles.sass'

// Theme
+theme(v-input--selection-controls) using ($material)
  &.v-input--is-disabled:not(.v-input--indeterminate)
    .v-icon
      // needed for helper override
      color: map-deep-get($material, 'buttons', 'disabled') !important

.v-input--selection-controls
  margin-top: $input-top-spacing
  padding-top: 4px

  .v-input__append-outer,
  .v-input__prepend-outer
    margin-top: 0
    margin-bottom: 0

  .v-input__control
    flex-grow: 0
    width: auto

  &:not(.v-input--hide-details)
    .v-input__slot
      margin-bottom: 12px

  &__input
    color: inherit
    display: inline-flex
    flex: 0 0 auto
    height: 24px
    position: relative
    margin-right: 8px
    transition: .3s cubic-bezier(.25,.8,.25,1)
    transition-property: color, transform
    width: 24px
    user-select: none

    +rtl()
      margin-right: 0
      margin-left: 8px

    input[role="checkbox"],
    input[role="radio"],
    input[role="switch"]
      position: absolute
      opacity: 0
      width: 100%
      height: 100%
      cursor: pointer
      user-select: none

    // Sibling selector to avoid targeting v-radio-group's label
    & + .v-label
      cursor: pointer
      user-select: none

  &__ripple
    border-radius: 50%
    cursor: pointer
    height: 34px
    position: absolute
    transition: inherit
    width: 34px
    left: -12px
    top: calc(50% - 24px)
    margin: 7px

    &:before
      border-radius: inherit
      bottom: 0
      content: ''
      position: absolute
      opacity: .2
      left: 0
      right: 0
      top: 0
      transform-origin: center center
      transform: scale(0.2)
      transition: inherit

    .v-ripple__container
      transform: scale(1.2)

  &.v-input
    flex: 0 1 auto

    .v-label
      align-items: center
      display: inline-flex
      top: 0
      height: auto

  &.v-input--is-focused,
  .v-radio--is-focused
    .v-input--selection-controls__ripple:before
      background: currentColor
      opacity: .4
      transform: scale(1.2)

  .v-input--selection-controls__input:hover
    .v-input--selection-controls__ripple:before
      background: currentColor
      transform: scale(1.2)
      transition: none