@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

    &__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

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

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