@use 'sass:math';
@use '../../assets/styles/index.scss' as *;

.root {
    --uui-radio_input-bg: var(--uui-control-bg);
    --uui-radio_input-bg-disabled: var(--uui-control-bg-disabled);
    --uui-radio_input-border: var(--uui-control-border);
    --uui-radio_input-border-hover: var(--uui-color-60);
    --uui-radio_input-border-checked: var(--uui-color-50);
    --uui-radio_input-border-checked-disabled: var(--uui-color-20);
    --uui-radio_input-border-disabled: var(--uui-control-border-disabled);
    --uui-radio_input-label: var(--uui-text-primary);
    --uui-radio_input-label-disabled: var(--uui-text-disabled);
    --uui-radio_input-fill-hover: var(--uui-color-60);
    --uui-radio_input-fill-checked: var(--uui-color-50);
    --uui-radio_input-fill-checked-disabled: var(--uui-color-20);
    --uui-radio_input-error: var(--uui-error-50);

    // font
    --uui-radio_input-font: var(--uui-font);
    --uui-radio_input-font-weight: 400;

    // size
    --uui-radio_input-size: var(--uui-size);
    --uui-radio_input-bullet-size: var(--uui-size);
    --uui-radio_input-border-radius: var(--uui-border-radius);
    --uui-radio_input-border-width: var(--uui-border-width);
    --uui-radio_input-horizontal-gap: var(--uui-horizontal-gap);
    --uui-radio_input-line-height: var(--uui-line-height);
    --uui-radio_input-font-size: var(--uui-font-size);
    //
    column-gap: var(--uui-radio_input-horizontal-gap);

    :global(.uui-radioinput) {
        height: var(--uui-radio_input-size);
        width: var(--uui-radio_input-size);
        border-radius: calc(var(--uui-radio_input-size) / 2);
        background-color: var(--uui-radio_input-bg);
        border: var(--uui-radio_input-border-width) solid var(--uui-radio_input-border);
        position: relative;
        align-self: baseline;
        flex-shrink: 0;
        box-sizing: border-box;

        :global(input[type='radio']):focus-visible {
            @include focus-visible-effect();
            width: inherit;
            height: inherit;
            position: absolute;
        }

        &:global(.uui-checked) {
            border-color: var(--uui-radio_input-border-checked);

            :global(.uui-icon) {
                fill: var(--uui-radio_input-fill-checked);
                position: absolute;
                top: calc(0px - var(--uui-radio_input-border-width));
                left: calc(0px - var(--uui-radio_input-border-width));

                svg {
                    height: var(--uui-radio_input-bullet-size);
                    width: var(--uui-radio_input-bullet-size);
                }
            }
        }
    }

    :global(.uui-input-label) {
        //@include typography-inline(); TODO: ???
        color: var(--uui-radio_input-label);
        font-family: var(--uui-radio_input-font);
        font-weight: var(--uui-radio_input-font-weight);
        font-size: var(--uui-radio_input-font-size);
        line-height: var(--uui-radio_input-line-height);
        flex-grow: 1;
        display: flex;
        align-items: center;
    }

    &:hover, &:focus-within {
        :global(.uui-radioinput) {
            border-color: var(--uui-radio_input-border-hover);

            &:global(.uui-checked) {
                border-color: var(--uui-radio_input-border-hover);

                :global(.uui-icon) {
                    fill: var(--uui-radio_input-fill-hover);
                }
            }
        }

        &:global(.uui-disabled),
        &:global(.uui-readonly) {
            :global(.uui-radioinput) {
                background-color: var(--uui-radio_input-bg-disabled);
                border-color: var(--uui-radio_input-border-disabled);

                :global(.uui-icon) {
                    fill: var(--uui-radio_input-fill-checked-disabled);
                }
            }
        }
    }

    &:global(.uui-invalid) {
        :global(.uui-icon) {
            fill: var(--uui-radio_input-error);
        }

        :global(.uui-input-label) {
            color: var(--uui-radio_input-error);
        }

        :global(.uui-radioinput) {
            border-color: var(--uui-radio_input-error);
        }

        :global(.uui-checked) {
            &:global(.uui-radioinput) {
                :global(.uui-icon) {
                    fill: var(--uui-radio_input-error);
                }
            }
        }

        &:hover, &:focus-within {
            :global(.uui-radioinput) {
                border-color: var(--uui-radio_input-error);
            }

            :global(.uui-icon) {
                fill: var(--uui-radio_input-error);
            }
        }
    }

    &:global(.uui-disabled),
    &:global(.uui-readonly) {
        cursor: default;

        :global(.uui-radioinput) {
            cursor: default;
            background-color: var(--uui-radio_input-bg-disabled);
            border-color: var(--uui-radio_input-border-disabled);

            :global(.uui-icon) {
                fill: var(--uui-radio_input-fill-checked-disabled);
            }


            &:global(.uui-checked) {
                border-color: var(--uui-radio_input-border-checked-disabled);

                :global(.uui-icon) {
                    fill: var(--uui-radio_input-fill-checked-disabled);
                }
            }
        }

        &:global(.uui-invalid) {
            :global(.uui-radioinput) {
                cursor: default;
                background-color: var(--uui-radio_input-bg-disabled);
                border-color: var(--uui-radio_input-border-disabled);

                :global(.uui-icon) {
                    fill: var(--uui-radio_input-fill-checked-disabled);
                }
            }
        }
    }

    &:global(.uui-readonly) {
        :global(.uui-input-label) {
            color: var(--uui-radio_input-label);
        }
    }

    &:global(.uui-disabled) {
        :global(.uui-input-label) {
            color: var(--uui-radio_input-label-disabled);
        }
    }
}
