// 1. We allow descending specificity order here because we don't want to set the background-image with SVG twice
//    and therefore bloating the CSS.
// 2. We need to set the background-color of the non-disabled Checkbox input to initial color when it is hovered
//    or active, because we need it contrasting with the background color.

@use 'theme';
@use '../../theme/form-fields' as form-fields-theme;
@use '../../tools/form-fields' as form-fields-tools;
@use '../../tools/svg';

$_field-name: 'Checkbox';

.Checkbox {
    @include form-fields-tools.inline-field-root();
}

.Checkbox__text {
    margin-left: form-fields-theme.$inline-field-gap;
}

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

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

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

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

    flex-shrink: 0;
    width: theme.$input-width;
    height: theme.$input-width;
    margin: theme.$input-margin;
    border-radius: theme.$input-border-radius;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: form-fields-theme.$input-background-color;

    &:checked,
    &:indeterminate {
        border-color: form-fields-theme.$inline-field-input-border-color-checked;
        background-color: form-fields-theme.$inline-field-input-background-color-checked;
    }

    &:checked {
        background-image: svg.escape(theme.$input-checked-mark);
    }

    &:indeterminate {
        background-image: svg.escape(theme.$input-indeterminate-mark);
    }
}

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

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

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

.Checkbox--item {
    @include form-fields-tools.item();
}

.Checkbox--item .Checkbox__label {
    @include form-fields-tools.item-label();
}

.Checkbox--item .Checkbox__validationText {
    @include form-fields-tools.item-validation-text();
}

.Checkbox--item .Checkbox__helperText {
    @include form-fields-tools.item-helper-text();
}

.Checkbox--item:is(.Checkbox--disabled, .Checkbox.is-disabled) {
    @include form-fields-tools.item-disabled();
}

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

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

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

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

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

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

    &:checked,
    &:indeterminate {
        border-color: form-fields-theme.$inline-field-input-border-color-checked-disabled;
    }

    &:checked {
        background-image: svg.escape(theme.$input-checked-mark-disabled);
    }

    // stylelint-disable-next-line no-descending-specificity -- 1.
    &:indeterminate {
        background-image: svg.escape(theme.$input-indeterminate-mark-disabled);
    }
}

// stylelint-disable-next-line selector-max-specificity -- 2.
.Checkbox--item:not(.Checkbox--disabled, .Checkbox.is-disabled) .Checkbox__input:is(:hover, :active):not(:checked) {
    background-color: form-fields-theme.$input-background-color;
}
