package.lib.components.VSelectionControl.VSelectionControl.sass Maven / Gradle / Ivy

Go to download
@use 'sass:map'
@use 'sass:list'
@use '../../styles/settings'
@use '../../styles/tools'
@use './variables' as *

@include tools.layer('components')
  .v-selection-control
    align-items: center
    contain: layout
    display: flex
    flex: 1 0
    grid-area: control
    position: relative
    user-select: none

    .v-label
      white-space: normal
      word-break: break-word
      height: 100%

    &--disabled
      opacity: var(--v-disabled-opacity)
      pointer-events: none

    &--error,
    &--disabled
      .v-label
        opacity: 1

    &--error:not(.v-selection-control--disabled)
      .v-label
        color: rgb(var(--v-theme-error))

    &--inline
      display: inline-flex
      flex: 0 0 auto
      min-width: 0
      max-width: 100%

      .v-label
        width: auto

    @at-root
      @include tools.density('v-selection-control', $selection-control-density) using ($modifier)
        --v-selection-control-size: #{$selection-control-size + $modifier}

  .v-selection-control__wrapper
    width: var(--v-selection-control-size)
    height: var(--v-selection-control-size)
    display: inline-flex
    align-items: center
    position: relative
    justify-content: center
    flex: none

  .v-selection-control__input
    width: var(--v-selection-control-size)
    height: var(--v-selection-control-size)
    align-items: center
    display: flex
    flex: none
    justify-content: center
    position: relative
    border-radius: 50%

    input
      cursor: pointer
      position: absolute
      left: 0
      top: 0
      width: 100%
      height: 100%
      opacity: 0

    &::before
      @include tools.absolute(true)
      border-radius: 100%
      background-color: currentColor
      opacity: 0
      pointer-events: none

    &:hover::before
      opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier))

    > .v-icon
      opacity: var(--v-medium-emphasis-opacity)

    .v-selection-control--disabled &,
    .v-selection-control--dirty &,
    .v-selection-control--error &
      > .v-icon
        opacity: 1

    .v-selection-control--error:not(.v-selection-control--disabled) &
      > .v-icon
        color: rgb(var(--v-theme-error))

    .v-selection-control--focus-visible &::before
      opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier))