/**
 * @file _radio.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * @@VERSION@@
 * @brief Styles für die Radio Komponente.
 *
 * Diese Datei enthält, von der _check.scss abweichende, CSS-Regeln, um die Radio Komponente
 * visuell darzustellen.
 */

.kern-form-check {
    &__radio {
        display: flex;
        border-radius: 100%;

        &::before {
            border-radius: 100%;
            content: "";
            margin: auto;
        }

        &:checked {
            &::before {
                background-color: var(--kern-color-form-input-border, #171A2B);
                height: var(--kern-12, 12px);
                width: var(--kern-12, 12px);
            }
        }
        &--error {
            border-color: var(--kern-color-feedback-danger, #BD0F09) !important;
            outline-color: var(--kern-color-feedback-danger, #BD0F09) !important;
            background: var(--kern-color-feedback-danger-background, #FEECE8);

            &.kern-form-check__radio {
                &:checked {
                    &::before {
                        background-color: var(--kern-color-feedback-danger, #BD0F09);
                       @media (forced-colors: active) {
                        background-color: var(--kern-color-layout-background-inverted) !important;
                    }
                    }
                }
            }
        }
    }
}