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

@use './radio-theme' as *;

.kbq-radio-group {
    display: inline-flex;
    flex-direction: column;

    &.kbq-radio-group_normal {
        gap: var(--kbq-radio-size-normal-vertical-gap);
    }

    &.kbq-radio-group_big {
        gap: var(--kbq-radio-size-big-vertical-gap);
    }
}

// Top-level host container.
.kbq-radio-button {
    display: inline-flex;
}

.kbq-radio-label {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;

    cursor: pointer;

    // for maximum clickable area.
    width: 100%;
}

.kbq-radio-label-content {
    display: inline-flex;

    position: relative;

    order: 0;
    line-height: inherit;

    padding-left: kbq-sum-series-css-variables(
        [radio-size-normal-outer-size,
        radio-size-normal-horizontal-content-padding,
        calc(var(--kbq-radio-size-normal-outer-circle-border-width) * 2)]
    );
    padding-right: 0;

    .kbq-radio-button__outer-circle,
    .kbq-radio-button__inner-circle {
        box-sizing: content-box;
        position: absolute;
        display: flex;

        content: '';

        border: {
            style: solid;
            radius: 50%;
        }
    }

    .kbq-radio-button__outer-circle {
        border-width: var(--kbq-radio-size-normal-outer-circle-border-width);

        left: 0;

        top: kbq-css-half-difference(
            typography-text-normal-line-height,
            radio-size-normal-outer-size,
            radio-size-normal-outer-circle-border-width
        );

        width: var(--kbq-radio-size-normal-outer-size);
        height: var(--kbq-radio-size-normal-outer-size);
    }

    .kbq-radio-button__inner-circle {
        position: relative;
        margin: auto;

        width: var(--kbq-radio-size-normal-inner-size);
        height: var(--kbq-radio-size-normal-inner-size);
    }

    .kbq-radio__text-container {
        display: flex;
        flex-direction: column;
    }

    & .kbq-hint {
        margin-top: var(--kbq-radio-size-normal-vertical-content-padding);
    }

    [dir='rtl'] & {
        padding-right: var(--kbq-radio-size-normal-horizontal-content-padding);
        padding-left: 0;
    }
}

.kbq-radio-button.kbq-radio-button_big {
    .kbq-radio-label-content {
        padding-left: kbq-sum-series-css-variables(
            [radio-size-big-outer-size,
            radio-size-big-horizontal-content-padding,
            calc(var(--kbq-radio-size-big-outer-circle-border-width) * 2)]
        );

        .kbq-radio-button__outer-circle {
            border-width: var(--kbq-radio-size-big-outer-circle-border-width);

            top: kbq-css-half-difference(
                typography-text-big-line-height,
                radio-size-big-outer-size,
                radio-size-big-outer-circle-border-width
            );

            width: var(--kbq-radio-size-big-outer-size);
            height: var(--kbq-radio-size-big-outer-size);
        }

        .kbq-radio-button__inner-circle {
            width: var(--kbq-radio-size-big-inner-size);
            height: var(--kbq-radio-size-big-inner-size);
        }

        & .kbq-hint {
            margin-top: var(--kbq-radio-size-big-vertical-content-padding);
        }

        [dir='rtl'] & {
            padding-right: var(--kbq-radio-size-big-horizontal-content-padding);
        }
    }
}

@include kbq-radio-theme();
@include kbq-radio-typography();