@use '../core/styles/common/tokens' as *;

@mixin kbq-radio-state($type, $state-name) {
    $base-path: radio-#{$type}-#{$state-name};

    & .kbq-radio-button__outer-circle {
        border-color: var(--kbq-#{$base-path}-outer-circle-border);
        background: var(--kbq-#{$base-path}-outer-circle-background);
    }

    & .kbq-radio-button__inner-circle {
        background: var(--kbq-#{$base-path}-inner-circle-background);
    }
}

@mixin kbq-radio-color($type-name) {
    @include kbq-radio-state($type-name, default);

    & .kbq-hint .kbq-hint__text {
        color: var(--kbq-radio-#{$type-name}-default-caption);
    }

    &:hover,
    &.kbq-hovered {
        @include kbq-radio-state($type-name, states-hover);
    }

    &.cdk-keyboard-focused {
        @include kbq-radio-state($type-name, states-focused);

        & .kbq-radio-button__outer-circle {
            box-shadow: var(--kbq-radio-#{$type-name}-states-focused-outer-circle-shadow);
        }
    }

    &.kbq-selected:not(.kbq-disabled) {
        @include kbq-radio-state($type-name, states-checked);
    }

    &.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) {
        @include kbq-radio-state($type-name, states-checked-focused);

        & .kbq-radio-button__outer-circle {
            box-shadow: var(--kbq-radio-#{$type-name}-states-checked-focused-outer-circle-shadow);
        }
    }

    &.kbq-selected.kbq-disabled {
        @include kbq-radio-state($type-name, states-checked-disabled);
    }

    &.kbq-disabled {
        @include kbq-radio-state($type-name, states-disabled);

        & .kbq-radio-label {
            cursor: default;
            color: var(--kbq-radio-#{$type-name}-states-disabled-caption);
        }

        & .kbq-hint .kbq-hint__text {
            color: var(--kbq-radio-#{$type-name}-states-disabled-caption);
        }
    }
}

@mixin kbq-radio-theme() {
    .kbq-radio-button {
        & .kbq-radio-button__inner-circle {
            border-width: 0 !important;
        }

        @include kbq-radio-color(theme);

        color: var(--kbq-foreground-contrast);

        &.kbq-error {
            @include kbq-radio-color(error);

            color: var(--kbq-foreground-contrast);
        }
    }
}

@mixin kbq-radio-typography() {
    .kbq-radio-button {
        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);

        & .kbq-hint .kbq-hint__text {
            @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
        }
    }

    .kbq-radio-button.kbq-radio-button_big {
        @include kbq-typography-level-to-styles-css-variables(typography, text-big);

        & .kbq-hint .kbq-hint__text {
            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
        }
    }
}