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

@include tools.layer('components')
  .v-color-picker-canvas
    $root: &
    display: flex
    position: relative
    overflow: hidden
    contain: content
    touch-action: none
    width: 100%

    &__dot
      position: absolute
      top: 0
      left: 0
      width: $color-picker-canvas-dot-size
      height: $color-picker-canvas-dot-size
      background: transparent
      border-radius: 50%
      box-shadow: $color-picker-canvas-dot-box-shadow
      
      @media (forced-colors: active)
        border-style: solid
        outline: 2px solid highlight

      &--disabled
        box-shadow: $color-picker-canvas-dot-disabled-box-shadow

      #{$root}:hover &
        will-change: transform