/**
* @file _check.scss
* @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
* @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
* @date 16.12.2024
* @modified 09.04.2026
* @@VERSION@@
* @brief Styles für die Checkbox und Radio Komponente.
*
* Diese Datei enthält gemeinsame CSS-Regeln, um die Checkbox und Radio Komponente
* visuell darzustellen. Sie definiert das Grundaussehen,
* Zuständ (:hover, :focus, :checked, disabled)
*/

@use "../utilities/mixins";

.kern-form-check {
    display: grid;
    grid-template-columns: var(--kern-metric-dimension-large, 32px) auto;
    align-items: start;
    padding-right: var(--kern-metric-space-default, 16px);

    &__radio,
    &__checkbox {
        width: var(--kern-metric-dimension-large, 32px);
        height: var(--kern-metric-dimension-large, 32px);
        border: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-form-input-border-contextual, #1D2034);
        background: var(--kern-color-layout-layer-surface-contextual, #F3F4F7);
        margin: var(--kern-metric-space-none, 0px);
        appearance: none;

        &:hover {
            border: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-form-input-border-contextual, #1D2034);
        }

        &:focus,
        &:focus-visible {
            @include mixins.focus;
            border: var(--kern-metric-border-width-none, 0px);
            forced-color-adjust: none;
            @include mixins.forced-colors-focus;

            &:hover {
                border: var(--kern-metric-border-width-none, 0px);
            }
        }

        &:checked {

            &:focus,
            &:focus-visible {
                @include mixins.focus;
                border: var(--kern-metric-border-width-none, 0px);
                forced-color-adjust: none;
                @include mixins.forced-colors-focus;

                &:hover {
                    border: var(--kern-metric-border-width-none, 0px);
                }
            }
        }

        &--error {

            &:focus,
            &:focus-visible {
                @include mixins.focus;
                outline-color: var(--kern-color-feedback-danger-contextual, #C31C13);
                // box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px) var(--kern-color-feedback-danger-contextual, #C31C13);
                // outline: var(--kern-metric-border-width-none, 0px);
                @include mixins.forced-colors-focus;

                @media (forced-colors: active) {
                    box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px) var(--kern-color-layout-background-inverted) !important;
                    background-color: var(--kern-color-layout-background-default) !important;
                }
            }

            &:checked {

                &:focus,
                &:focus-visible {
                    @include mixins.focus;
                    outline-color: var(--kern-color-feedback-danger-contextual, #C31C13);
                    @include mixins.forced-colors-focus;

                    @media (forced-colors: active) {
                        box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px) var(--kern-color-layout-background-inverted) !important;
                        background-color: var(--kern-color-layout-background-default) !important;
                    }
                }
            }
        }

        &[disabled],
        &[aria-disabled='true'] {
            outline: 0;
            opacity: var(--kern-color-action-state-opacity-disabled, 0.4);

            &:checked {
                outline: var(--kern-metric-border-width-none, 0px);
            }

            &:hover {
                cursor: default;
            }

            ~.kern-label {
                opacity: var(--kern-color-action-state-opacity-disabled, 0.4);
                cursor: default;
            }
        }
    }

    .kern-label {
        font-weight: var(--kern-typography-font-weight-label-subtle, 400);
        padding-top: var(--kern-metric-space-x-small, 4px);
        padding-left: var(--kern-metric-space-default, 16px);

        &:has(.kern-label__optional) {
            @include mixins.optional;
        }

        &__optional {
            color: var(--kern-color-layout-text-muted-contextual, #404565);
            font-weight: var(--kern-typography-font-weight-label-subtle, 400);
        }
    }

    .kern-error {
        grid-column: span 2;
        padding-top: var(--kern-metric-space-small, 8px);

        .kern-icon {
            @include mixins.icon-default;
        }
    }

    &--error {
        border-left: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-feedback-danger-contextual, #C31C13);
        padding-left: var(--kern-metric-space-default, 16px);

        .kern-form-check__checkbox--error {
            border-color: var(--kern-color-feedback-danger-contextual, #C31C13) !important;
            outline-color: var(--kern-color-feedback-danger-contextual, #C31C13) !important;
            background: var(--kern-color-feedback-danger-background-contextual, #FEE4E0);
        }

        .kern-form-check__radio {
            &:before {
                background-color: var(--kern-color-feedback-danger-contextual, #C31C13);
            }
        }
    }
}