@use 'theme';
@use '../../settings/cursors';
@use '../../theme/form-fields' as form-fields-theme;
@use '../../tools/form-fields' as form-fields-tools;
@use '../../tools/reset';

$_field-name: 'UNSTABLE_Toggle';

.UNSTABLE_Toggle {
    display: flex;
    align-items: start;
    justify-content: space-between;
    max-width: theme.$max-width;
    margin-block: form-fields-theme.$inline-field-margin-y;
    cursor: cursors.$form-fields;
}

.UNSTABLE_Toggle--fluid {
    max-width: none;
}

.UNSTABLE_Toggle__text {
    margin-right: form-fields-theme.$inline-field-gap;
}

.UNSTABLE_Toggle__label {
    @include form-fields-tools.inline-field-label();
}

.UNSTABLE_Toggle__label--hidden {
    @include form-fields-tools.label-hidden();
}

.UNSTABLE_Toggle__label--required::after {
    @include form-fields-tools.label-required();
}

.UNSTABLE_Toggle__input {
    @include form-fields-tools.inline-field-input();

    display: grid;
    flex-shrink: 0;
    grid-template-areas: 'toggle';
    width: theme.$input-width;
    height: theme.$input-height;
    border: theme.$input-border-width solid theme.$input-border-color;
    border-radius: theme.$input-border-radius;
    background-color: theme.$input-background-color;

    @media (prefers-reduced-motion: no-preference) {
        transition-property: border-color, background-color;
        transition-duration: theme.$input-transition-duration;
        transition-timing-function: theme.$input-transition-timing;
    }

    &::before,
    &::after {
        content: '';
        display: block;
        grid-area: toggle;
        width: theme.$input-mark-size;
        height: theme.$input-mark-size;
        margin: theme.$input-mark-spacing;
        border-radius: theme.$input-mark-border-radius;
        box-shadow: theme.$input-mark-shadow;
        transform: translateX(0);

        @media (prefers-reduced-motion: no-preference) {
            transition-property: transform, opacity, visibility;
            transition-duration: theme.$input-transition-duration;
            transition-timing-function: theme.$input-transition-timing;
        }
    }

    &::before {
        background-color: theme.$input-mark-background-color;
        visibility: visible;
        opacity: 1;
    }

    &::after {
        background-color: theme.$input-mark-background-color-checked;
        visibility: hidden;
        opacity: 0;
    }

    &:focus-visible {
        box-shadow: theme.$input-focus-shadow;
    }

    &:checked {
        border-color: theme.$input-border-color-state-checked;
        background-color: theme.$input-background-color-state-checked;

        &::before,
        &::after {
            transform: translateX(100%);
        }

        &::before {
            visibility: hidden;
            opacity: 0;
        }

        &::after {
            visibility: visible;
            opacity: 1;
        }
    }

    @media (hover: hover) {
        &:hover,
        &:active {
            background-color: theme.$input-background-color-state-hover;
        }

        &:checked:hover,
        &:checked:active {
            background-color: theme.$input-background-color-state-checked-hover;
        }
    }
}

.UNSTABLE_Toggle__input--indicators::before,
.UNSTABLE_Toggle__input--indicators::after {
    background-size: 100%;
    background-color: transparent;
}

.UNSTABLE_Toggle__input--indicators::before {
    background-image: theme.$input-mark-image;
}

.UNSTABLE_Toggle__input--indicators::after {
    background-image: theme.$input-mark-image-state-checked;
}

.UNSTABLE_Toggle__validationText,
.UNSTABLE_Toggle > .UNSTABLE_Toggle__text > [data-spirit-element='validation_text'] {
    @include form-fields-tools.validation-text();
}

.UNSTABLE_Toggle__helperText {
    @include form-fields-tools.helper-text();
}

@include form-fields-tools.input-field-validation-states($_field-name);

.UNSTABLE_Toggle:is(.UNSTABLE_Toggle--disabled, .is-disabled) {
    @include form-fields-tools.inline-field-root-disabled();
}

.UNSTABLE_Toggle:is(.UNSTABLE_Toggle--disabled, .is-disabled) .UNSTABLE_Toggle__label {
    @include form-fields-tools.label-disabled();
}

.UNSTABLE_Toggle:is(.UNSTABLE_Toggle--disabled, .is-disabled) > .UNSTABLE_Toggle__input,
.UNSTABLE_Toggle > .UNSTABLE_Toggle__input:disabled {
    @include form-fields-tools.input-disabled();

    border-color: theme.$input-border-color-state-disabled;
    background-color: theme.$input-background-color-state-disabled;

    &::before,
    &::after {
        background-color: theme.$input-mark-background-color-state-disabled;
        box-shadow: none;
    }
}

.UNSTABLE_Toggle:is(.UNSTABLE_Toggle--disabled, .is-disabled) > .UNSTABLE_Toggle__input--indicators,
.UNSTABLE_Toggle > .UNSTABLE_Toggle__input--indicators:disabled {
    &::before,
    &::after {
        background-color: transparent;
    }

    &::before {
        background-image: theme.$input-mark-image-state-disabled;
    }

    &::after {
        background-image: theme.$input-mark-image-state-checked-disabled;
    }
}

.UNSTABLE_Toggle:is(.UNSTABLE_Toggle--disabled, .is-disabled) .UNSTABLE_Toggle__validationText {
    @include form-fields-tools.validation-text-disabled();
}

.UNSTABLE_Toggle:is(.UNSTABLE_Toggle--disabled, .is-disabled) .UNSTABLE_Toggle__helperText {
    @include form-fields-tools.helper-text-disabled();
}
