@import "~scss/variables";

$sw-field-color-text: $color-darkgray-200;
$sw-field-color-focus: $color-shopware-brand-500;
$sw-field-color-background: $color-white;
$sw-field-color-border: $color-gray-300;
$sw-field-color-error: $color-crimson-500;
$sw-field-color-inherited: $color-module-purple-900;

.sw-field--checkbox {
    margin-bottom: 22px;

    .sw-field--checkbox__content {
        display: grid;
        grid-template-columns: 16px 1fr;
        align-items: center;

        &.is--padded {
            margin-top: 24px;
            padding: 16px;
        }

        &.is--bordered {
            margin-top: 24px;
            border-radius: 4px;
            border: 1px solid $color-gray-300;
            padding: 15px;
        }
    }

    .sw-field {
        margin-bottom: 0;
    }

    .sw-field__label {
        margin-bottom: 0;
        margin-left: 10px;
    }

    .sw-field__hint {
        margin-bottom: 0;
        margin-left: 10px;
    }

    .sw-field__checkbox {
        width: 16px;
        height: 16px;
        position: relative;

        input[type="checkbox"] {
            opacity: 0;
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            border: 0 none;
            background: none;
            -webkit-appearance: none;
            cursor: pointer;
            z-index: 2;

            &:focus-visible {
                outline: revert;
                opacity: 1;
            }

            &:disabled {
                cursor: not-allowed;
            }

            &:disabled ~ .sw-field__checkbox-state {
                background: $color-gray-100;
                border-color: $color-gray-300;
                color: lighten($sw-field-color-text, 40%);
            }

            &:checked,
            &:indeterminate {
                ~ .sw-field__checkbox-state {
                    background: $sw-field-color-focus;
                    border-color: $sw-field-color-focus;

                    .sw-icon {
                        display: inline-block;
                    }
                }
            }

            &:checked:disabled ~ .sw-field__checkbox-state {
                background: $color-gray-100;
                border-color: $color-gray-300;
                color: lighten($sw-field-color-text, 40%);

                .sw-icon {
                    display: inline-block;
                    color: lighten($sw-field-color-text, 40%);
                }
            }

            &:focus ~ .sw-field__checkbox-state {
                outline: 2px solid $sw-field-color-focus;
                outline-offset: 2px;
            }
        }

        .sw-field__checkbox-state {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1;
            text-align: center;
            background: $sw-field-color-background;
            color: $sw-field-color-text;
            border: 1px solid $sw-field-color-border;
            border-radius: 4px;

            .sw-icon {
                width: 16px;
                height: 16px;
                padding-top: 5px;
                padding-right: 4px;
                padding-bottom: 5px;
                padding-left: 4px;
                display: none;
                position: absolute;
                top: -1px;
                left: -1px;
                color: $sw-field-color-background;
            }
        }
    }

    &.has--error {
        .sw-field__checkbox-state {
            border: 1px solid $sw-field-color-error;
        }

        input[type="checkbox"] {
            &:disabled ~ .sw-field__checkbox-state {
                border: 1px solid $sw-field-color-error, 5%;
            }

            &:checked ~ .sw-field__checkbox-state {
                border: 1px solid $sw-field-color-error;
                background-color: $sw-field-color-error;
            }

            &:checked:disabled ~ .sw-field__checkbox-state {
                border: 1px solid $sw-field-color-error;
            }
        }

        .sw-field__label {
            color: $color-crimson-500;
        }
    }

    &.is--inherited {
        input[type="checkbox"] {
            &:checked ~ .sw-field__checkbox-state {
                border-color: $sw-field-color-border;
                background: $sw-field-color-border;
            }
        }
    }

    &.is--disabled {
        .sw-field__label {
            label {
                cursor: not-allowed;
            }
        }

        .sw-field__hint {
            cursor: not-allowed;
        }
    }
}

.sw-field--checkbox.sw-field__checkbox--ghost {
    .sw-field__checkbox input[type="checkbox"]:not(:checked) ~ .sw-field__checkbox-state {
        background-color: transparent;
        border: 1px solid $color-shopware-brand-500;

        .sw-icon {
            display: inline-block;
            color: $color-shopware-brand-500;
        }
    }

    &.is--disabled {
        .sw-field__checkbox input[type="checkbox"]:not(:checked) ~ .sw-field__checkbox-state {
            border: 1px solid $color-gray-300;

            .sw-icon {
                color: $color-gray-300;
            }
        }
    }
}
