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

@include tools.layer('components')
  .v-color-picker-swatches
    overflow-y: auto

    > div
      display: flex
      flex-wrap: wrap
      justify-content: center
      padding: $color-picker-swatches-border-radius

  .v-color-picker-swatches__swatch
    display: flex
    flex-direction: column
    margin-bottom: $color-picker-swatch-margin-bottom

  .v-color-picker-swatches__color
    position: relative
    height: $color-picker-swatch-color-height
    max-height: $color-picker-swatch-color-height
    width: $color-picker-swatch-color-width
    margin: $color-picker-swatch-color-margin
    border-radius: $color-picker-swatch-color-border-radius
    user-select: none
    overflow: hidden
    background: $color-picker-checkerboard
    cursor: pointer

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

    > div
      display: flex
      align-items: center
      justify-content: center
      width: 100%
      height: 100%

  @media (forced-colors: active)
    .v-color-picker-swatches > div
      forced-color-adjust: preserve-parent-color