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

@include tools.layer('components')
  .v-color-picker-preview__alpha
    .v-slider-track__background
      @include tools.layer('overrides')
        background-color: transparent

      @include tools.ltr()
        background-image: linear-gradient(to right, transparent, var(--v-color-picker-color-hsv))
      @include tools.rtl()
        background-image: linear-gradient(to left, transparent, var(--v-color-picker-color-hsv))

      &::after
        content: ''
        z-index: -1
        left: 0
        top: 0
        width: 100%
        height: 100%
        position: absolute
        background: $color-picker-checkerboard
        border-radius: inherit

  .v-color-picker-preview__sliders
    display: flex
    flex: 1 0 auto
    flex-direction: column
    padding-inline-end: $color-picker-preview-sliders-padding

  .v-color-picker-preview__dot
    position: relative
    height: $color-picker-preview-dot-size
    width: $color-picker-preview-dot-size
    background: $color-picker-checkerboard
    border-radius: 50%
    overflow: hidden
    margin-inline-end: $color-picker-preview-dot-margin

    > div
      width: 100%
      height: 100%

  .v-color-picker-preview__hue
    &:not(.v-input--is-disabled)
      .v-slider-track__background
        @include tools.ltr()
          background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%)

        @include tools.rtl()
          background: linear-gradient(to left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%)

  .v-color-picker-preview__track
    position: relative
    width: 100%

    @include tools.layer('overrides')
      margin: 0

    .v-slider-track__fill
      display: none

  .v-color-picker-preview
    align-items: center
    display: flex
    margin-bottom: $color-picker-preview-margin-bottom

  .v-color-picker-preview__eye-dropper
    position: relative
    margin-right: $color-picker-preview-dropper-margin

  @media (forced-colors: active)
    .v-color-picker-preview

      &__dot
        border-style: solid
        
        > div
          forced-color-adjust: preserve-parent-color
      
      &__sliders
        forced-color-adjust: preserve-parent-color

      .v-slider-thumb__surface
        background: transparent
        border: solid canvastext