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

.v-color-picker-edit
  display: flex

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

  &:not(:last-child)
    +tools.ltr()
      margin-right: $color-picker-input-margin

    +tools.rtl()
      margin-left: $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