@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

    > input::-webkit-outer-spin-button,
    > input::-webkit-inner-spin-button
      -webkit-appearance: none
      margin: 0

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

    input
      padding: 0
      font: inherit
      border-style: none
      border-radius: $color-picker-border-radius
      margin: 0 0 $color-picker-input-margin-bottom
      min-width: 0
      outline: none
      text-align: center
      width: 100%
      height: $color-picker-input-height
      background: tools.theme-color('surface-variant', .2)
      color: rgba(var(--v-theme-on-surface))
      -moz-appearance: textfield

      @media (forced-colors: active)
        border-style: solid

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