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

@include tools.layer('components')
  .v-color-picker-edit
    display: flex
    margin-top: $color-picker-input-margin-top

  .v-color-picker-edit__input
    width: 100%
    display: flex
    flex-wrap: wrap
    justify-content: center
    text-align: center

    &:not(:last-child)
      margin-inline-end: $color-picker-input-margin

    input
      border-radius: $color-picker-border-radius
      margin-bottom: $color-picker-input-margin-bottom
      min-width: 0
      outline: none
      text-align: center
      width: 100%
      height: $color-picker-input-height
      background: rgba(var(--v-theme-surface-variant), .2)
      color: rgba(var(--v-theme-on-surface))

    span
      font-size: $color-picker-input-font-size