@use '../../styles/tools'
@use './variables' as *

@include tools.layer('components')
  // Block
  .v-color-picker
    align-self: flex-start
    contain: content
    width: $color-picker-width

    &.v-sheet.v-picker
      @include tools.elevation($color-picker-elevation)
      @include tools.rounded($color-picker-border-radius)

  // Element
  .v-color-picker__controls
    display: flex
    flex-direction: column
    padding: $color-picker-controls-padding
    width: 100%

  // Modifier
  .v-color-picker--flat
    @include tools.elevation(0)

    .v-color-picker__track:not(.v-input--is-disabled) .v-slider__thumb // High specificity
      @include tools.elevation(0)