@use "../mixins" as *

.ra-control-wrapper

  &.type-checkbox
    @apply flex flex-row gap-2 items-center

.ra-settings-control

  input[type="checkbox"]
    @apply flex items-center justify-center
    @apply rounded-md
    @apply min-h-6 min-w-6
    @apply bg-transparent
    @apply border border-wp-gray-10 dark:border-wp-gray-50
    @apply text-wp-gray-70 dark:text-wp-gray-10

    @apply placeholder:text-wp-gray-30

    @apply hover:border-wp-blue-30

    @include onFocus

    &:checked

      &:before
        @apply flex items-center justify-center
        @apply w-4 h-4 min-h-4 min-w-4
        @apply rounded-sm
        background-color: var(--color-wp-blue-40)
        content: ''
        margin: 0

    &:disabled
      @apply cursor-not-allowed
      @apply bg-transparent opacity-50 filter grayscale
      @apply animate-pulse