.color-picker
  gap: 20px
  display: flex
  padding: 16px
  border-radius: 16px
  flex-direction: column

  .color-picker-sv-canvas
    width: 100%
    cursor: crosshair
    border-radius: 8px
    aspect-ratio: 1 / 1

  .color-picker-controls
    gap: 10px
    display: flex
    flex-direction: column

    .color-picker-control
      display: flex
      flex-direction: column

    .color-picker-control-row
      gap: 10px
      display: flex
      align-items: center

    .color-picker-control-column
      gap: 5px
      display: flex
      flex-direction: column
      align-items: center

    .color-picker-slider
      width: 100%
      height: 12px
      position: relative
      border-radius: 6px
      -webkit-appearance: none

      &.hue-slider
        background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red)

        &::-webkit-slider-thumb
          -webkit-appearance: none
          width: 16px
          height: 16px
          border-radius: 50%
          background: #fff
          border: 2px solid #999
          margin-top: -2px
          cursor: pointer

        &::-moz-range-thumb
          width: 16px
          height: 16px
          border-radius: 50%
          background: #fff
          border: 2px solid #999
          cursor: pointer

      &.alpha-slider
        background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0))

        &
          background-image: linear-gradient( to right, rgba(var(--rgb), 0), rgba(var(--rgb), 1) )

        &::-webkit-slider-thumb
          -webkit-appearance: none
          width: 16px
          height: 16px
          border-radius: 50%
          background: #fff
          border: 2px solid #999
          margin-top: -2px
          cursor: pointer

        &::-moz-range-thumb
          width: 16px
          height: 16px
          border-radius: 50%
          background: #fff
          border: 2px solid #999
          cursor: pointer

    .color-picker-rgba-text
      font-size: 12px
      font-weight: 500
      font-family: montserrat

  .color-picker-text-input
    padding: 8px
    border: none
    outline: none
    font-size: 14px
    font-weight: 500
    border-radius: 6px
    font-family: montserrat
    width: calc(100% - 16px)

  .color-picker-copy-button
    cursor: pointer
    font-size: 14px
    font-weight: 500
    padding: 8px 12px
    border-radius: 6px
    font-family: montserrat
    transition: background 0.2s