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


@mixin radio-sizes($size, $font-size, $bullet-size, $line-height) {
    $vpadding: math.div(($line-height - $size), 2);

    :global(.uui-radioinput) {
        width: $size;
        height: $size;
        border-radius: math.div($size, 2);
        margin: $vpadding 0;
    }

    :global(.uui-icon) {
        margin: $vpadding 0;

        svg {
            height: $bullet-size;
            width: $bullet-size;
        }
    }

    :global(.uui-input-label) {
        font-size: $font-size;
        line-height: $line-height;
    }
}

.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-checked: var(--uui-color-50);
    --uui-radio-input-border-hover: var(--uui-color-60);
    --uui-radio-input-border-disabled: var(--uui-control-border-disabled);
    --uui-radio-input-border-checked-disabled: var(--uui-color-20);
    --uui-radio-input-label: var(--uui-control-label);
    --uui-radio-input-label-disabled: var(--uui-control-label-disabled);
    --uui-radio-input-fill-checked: var(--uui-color-50);
    --uui-radio-input-fill-hover: var(--uui-color-60);
    --uui-radio-input-fill-checked-disabled: var(--uui-color-20);
    --uui-radio-input-error: var(--uui-negative-50);

    --uui-radio-input-font: var(--font-regular);
    //
    &: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-radioinput) {
        background-color: var(--uui-radio-input-bg);
        border: 1px solid var(--uui-radio-input-border);
        align-self: baseline;
        flex-shrink: 0;
        box-sizing: border-box;

        :global(input[type='radio']):focus-visible {
            @include focus-visible-effect(2px, inherit);
            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);
            }
        }
    }

    :global(.uui-input-label) {
        //@include typography-inline(); TODO: ???
        color: var(--uui-radio-input-label);
        flex-grow: 1;
        font-family: var(--uui-radio-input-font);
        font-weight: var(--uui-radio-input-font-weight, normal);
        margin-left: 12px;
        display: flex;
        align-items: center;
    }

    &: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);
        }
    }

    //Sizes
    &.size-18 {
        @include radio-sizes(18px, 14px, 18px, 18px);
    }

    &.size-12 {
        @include radio-sizes(12px, 12px, 12px, 14px);

        :global(.uui-input-label) {
            margin-left: 6px;
        }
    }
}
