.aw-switch-field {
    @apply flex relative;
    align-items: flex-start;

    &__element {
        @apply bg-surface border border-mono-800;
        flex-shrink: 0;
        cursor: pointer;
        appearance: none;
        vertical-align: middle;
        width: theme('spacing.8', 2rem);
        height: theme('spacing.8', 2rem);
        /* border: 1px solid theme('colors.muted');
        color: theme('colors.secondary', blue);
        background: theme('colors.white', white); */

        /* reset :invalid (firefox) */
        box-shadow: none;

        &:checked {
            @apply bg-accent border-accent;
            background-size: 100% 100%;
        }

        &:focus {
            @apply border-accent;
            outline: none;
        }

        &:hover {
            @apply border-mono-600;
        }

        &:checked:hover {
            @apply bg-accent-hover border-accent-hover;
        }

        &:disabled {
            @apply border-mono-800 bg-mono-800;

            &:hover {
                @apply border-mono-800 bg-mono-800;
            }

            .aw-switch-field__label {
                @apply text-mono-400;
            }
        }

        &:checked:disabled {
            @apply bg-accent-hover opacity-50 border-accent-hover;
        }

        /* &:checked:focus {
            border-color: theme('colors.info.700');
        } */
    }

    /**
     * Checkbox
     */

    &.is-checkbox &__element {
        border-radius: theme('spacing.2', 0.5rem);
        flex-shrink: 0;

        background-size: 20px 20px;
        background-position: center;
        background-repeat: no-repeat;

        &:checked {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20' height='20' fill='none'%3E%3Cpath fill='%23fff' d='m7 13.8-3-3.1a.8.8 0 0 0-1.3 1.1l3.8 3.8a.8.8 0 0 0 1.2 0l9.1-9.2a.8.8 0 0 0-1.1-1.2L7 13.8Z'/%3E%3C/svg%3E");
        }

        &--partial:checked {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath fill='%23fff' d='M3.3 10.8h13.4a.8.8 0 0 0 0-1.6H3.3a.8.8 0 1 0 0 1.6Z'/%3E%3C/svg%3E");
        }
    }

    /**
     * Radio
     */

    &.is-radio &__element {
        border-radius: 50%;

        &:checked {
            mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0ZM16 10C12.6863 10 10 12.6863 10 16C10 19.3137 12.6863 22 16 22C19.3137 22 22 19.3137 22 16C22 12.6863 19.3137 10 16 10Z' fill='%23D9D9D9'/%3E%3C/svg%3E");
        }
    }

    /**
     * Switcher
     */

    &.is-switcher {
        display: flex;
    }

    &.is-switcher &__label {
        user-select: none;
    }

    &__switch {
        @apply bg-mono-600 relative;
        flex-shrink: 0;
        margin: 0;
        cursor: pointer;
        order: -1;
        border-radius: 90px;
        transition: 120ms background-color;

        &-icon {
            @apply absolute;
            color: var(--c-on-overlay, '#fff');
            top: 50%;
            transform: translateY(-50%);
            transition: opacity 0.15s ease;
        }

        &-circle {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--c-on-overlay, '#fff');
            color: var(--c-overlay, '#000');
            /* background-color: currentColor; */
            border-radius: 50%;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
            transition: 120ms transform, 120ms background-color;
            z-index: 1;
            padding: 4px;
        }
    }

    &.is-switcher:hover &__element ~ &__switch {
        @apply bg-mono-400;
    }

    &.is-switcher:hover &__element:checked ~ &__switch {
        @apply bg-accent-hover;
    }

    &.is-switcher &__element:disabled ~ &__switch {
        @apply bg-mono-800;

        .aw-switch-field__switch-circle {
            background-color: var(--c-on-overlay, '#fff');
        }

        .aw-switch-field__switch-icon {
            @apply text-mono-600;
        }
    }

    &.is-switcher &__element:checked:disabled ~ &__switch {
        @apply bg-accent-hover bg-opacity-50;

        .aw-switch-field__switch-circle {
            background-color: var(--c-on-overlay, '#fff');
        }

        .aw-switch-field__switch-icon {
            color: var(--c-white);
        }
    }

    &.is-switcher &__element:disabled ~ &__label {
        @apply text-mono-400;
    }

    &.is-switcher &__element:focus-visible ~ &__switch {
        outline: theme('focusOutline');
    }

    &.is-switcher
        &__element:not(:checked)
        ~ &__switch
        .aw-switch-field__switch-icon--on {
        opacity: 0;
    }

    &.is-switcher
        &__element:checked
        ~ &__switch
        .aw-switch-field__switch-icon--off {
        opacity: 0;
    }

    /* Sizes */
    &--sm {
        .aw-switch-field__element:checked ~ .aw-switch-field__switch {
            .aw-switch-field__switch-circle {
                transform: translateX(100%);
            }
        }

        .aw-switch-field__switch {
            width: 28px;
            height: 16px;

            &-circle {
                width: 12px;
                height: 12px;
                margin: 2px;
            }
        }

        .aw-switch-field__label {
            padding-top: 0;
        }
    }

    &--md {
        .aw-switch-field__element:checked ~ .aw-switch-field__switch {
            .aw-switch-field__switch-circle {
                transform: translateX(108%);
            }
        }

        .aw-switch-field__switch {
            width: 37px;
            height: 20px;

            &-circle {
                width: 16px;
                height: 16px;
                margin: 2px;
            }

            &-icon--on {
                left: 5px;
            }

            &-icon--off {
                right: 5px;
            }
        }

        .aw-switch-field__label {
            padding-top: 1px;
        }
    }

    &--lg {
        .aw-switch-field__element:checked ~ .aw-switch-field__switch {
            .aw-switch-field__switch-circle {
                transform: translateX(100%);
            }
        }

        .aw-switch-field__switch {
            width: 60px;
            height: 32px;

            &-circle {
                width: 28px;
                height: 28px;
                margin: 2px;
            }

            &-icon--on {
                left: 4px;
            }

            &-icon--off {
                right: 4px;
            }
        }

        .aw-switch-field__label {
            padding-top: 0.5rem;
        }
    }

    /**
     * Label styles
     */
    &__label {
        padding-top: 0.3125rem;
        font-size: 1rem;
        line-height: 1.18rem;
    }

    &__element + &__label {
        padding-left: theme('spacing.4', 1rem);
        cursor: pointer;
        vertical-align: middle;
    }

    /**
     * Error styles
     */

    &.has-error &__element {
        @apply border-error;
    }

    &.has-error &__toggle {
        @apply border border-error;
    }

    /**
     * Disabled style
     */

    &__element[disabled],
    &__element[disabled] + &__label {
        cursor: not-allowed;
        user-select: none;
        /* opacity: 0.5; */
    }

    &__element[disabled] + &__label {
        @apply text-mono-400;
    }

    &__element[disabled] + &__label a {
        pointer-events: none;
    }

    &.is-switcher &__element[disabled] ~ &__switch {
        cursor: not-allowed;
        user-select: none;
    }
}