@use 'sass:map';
@use 'sass:math';
@use '../../base' as *;
@use 'igniteui-theming/sass/animations' as *;

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin radio($theme) {
    @include css-vars($theme);
    @include scale-in-out($start-scale: .9);

    $theme-variant: map.get($theme, '_meta', 'variant');
    $variant: map.get($theme, '_meta', 'theme');
    $material-theme: $variant == 'material';
    $bootstrap-theme: $variant == 'bootstrap';
    $not-bootstrap-theme: $variant != 'bootstrap';

    $label-margin: map.get((
        'material': rem(2px),
        'fluent': rem(8px),
        'bootstrap': rem(8px),
        'indigo': rem(8px),
    ), $variant);

    $size: map.get((
        'material': rem(40px),
        'fluent': rem(20px),
        'bootstrap': rem(16px),
        'indigo': rem(16px),
    ), $variant);

    $scale: map.get((
        'material': scale(.5),
        'fluent': scale(.5),
        'bootstrap': scale(.4375),
        'indigo': scale(.5),
    ), $variant);

    $border-width: map.get((
        'material': rem(2px),
        'fluent': rem(1px),
        'bootstrap': rem(1px),
        'indigo': rem(2px),
    ), $variant);

    $radio-hover-scale: map.get((
        'material': null,
        'fluent': scale(.5),
    ), $variant);

    $ripple-display: map.get((
        'material': block,
        'bootstrap': none,
        'fluent': none,
        'indigo': none,
    ), $variant);

    $horizontal-group-margin: map.get((
        'material': rem(16px),
        'fluent': rem(12px),
        'bootstrap': rem(8px),
        'indigo': rem(16px),
    ), $variant);

    $vertical-group-margin: map.get((
        'material': 0,
        'fluent': rem(8px),
        'bootstrap': rem(8px),
        'indigo': rem(8px),
    ), $variant);

    $border-style: solid;
    $border-radius: border-radius(50%);

    $transition: all .2s ease-in;

    $ripple-size: rem(40px);
    $ripple-radius: math.div($ripple-size, 2);

    %radio-display {
        position: relative;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: center;
        color: var-get($theme, 'label-color');
        width: max-content;
        cursor: pointer;
    }

    %radio-input {
        @include hide-default();
    }

    %radio-display--disabled {
        pointer-events: none;
        color: var-get($theme, 'disabled-label-color');
        user-select: none;
    }

    %radio-composite {
        position: relative;
        display: inline-block;
        width: $size;
        height: $size;
        min-width: $size;
        line-height: $size;
        color: var-get($theme, 'label-color');
        user-select: none;

        //ripple color
        --color: #{var-get($theme, 'empty-color')};

        &::before,
        &::after {
            position: absolute;
            content: '';
            width: $size;
            height: $size;
            inset-inline-start: 0;
            top: 0;
            border-radius: $border-radius;
        }

        @if $material-theme {
            &::before,
            &::after {
                width: math.div($size, 2);
                height: math.div($size, 2);
                top: 25%;
                inset-inline-start: 25%;
            }
        }

        &::before {
            backface-visibility: hidden;
            transform: scale(0);

            @if $not-bootstrap-theme {
                transition: $transition;
            }

            z-index: 1;
        }

        &::after {
            border: $border-width $border-style var-get($theme, 'empty-color');
            background: var-get($theme, 'empty-fill-color');
        }
    }

    %radio-composite--x {
        //ripple color
        --color: #{var-get($theme, 'fill-color')};

        &::before {
            border: $border-width $border-style var-get($theme, 'fill-color');
            background: var-get($theme, 'fill-color');
            transform: $scale;

            @if $bootstrap-theme {
                border-color: var-get($theme, 'fill-hover-border-color');
                background: var-get($theme, 'fill-hover-border-color');
            }
        }

        &::after {
            border: $border-width $border-style var-get($theme, 'fill-color');

            @if $bootstrap-theme{
                background: var-get($theme, 'fill-color');
            }
        }
    }

    %igx-radio-hover__composite {
        @if $variant != 'bootstrap' {
            &::before {
                background: var-get($theme, 'hover-color');
                transform: $radio-hover-scale;
            }
        }

        @if $variant == 'indigo' or $variant == 'bootstrap' {
            &::after {
                border: $border-width $border-style var-get($theme, 'hover-color');
                transition: $transition;
            }
        }
    }

    %igx-radio-hover__composite--invalid {
        &::before {
            background: var-get($theme, 'error-color');
        }

        @if $variant != 'material' {
            &::after {
                border-color: var-get($theme, 'error-color-hover');
            }
        }

        @if $variant == 'fluent' and $theme-variant == 'dark' {
            &::before {
                background: color($color: 'error', $variant: 500);
            }
        }
    }

    %igx-radio--checked-active__composite {
        @if $bootstrap-theme {
            &::after {
                background: var-get($theme, 'fill-color-hover');
                border-color: var-get($theme, 'fill-color-hover');
            }
        } @else {
            &::before {
                background: var-get($theme, 'fill-color-hover');
                border-color: var-get($theme, 'fill-hover-border-color');
            }

            &::after {
                border-color: var-get($theme, 'fill-hover-border-color');
            }
        }
    }

    %radio-composite--invalid {
        //ripple color
        --color: #{var-get($theme, 'error-color')};

        &::after {
            border: $border-width $border-style var-get($theme, 'error-color');
        }
    }

    %radio-composite--x--invalid {
        &::after {
            border: $border-width $border-style var-get($theme, 'error-color');
        }

        &::before {
            background: var-get($theme, 'error-color');
            border: $border-width $border-style transparent;
        }

        @if $bootstrap-theme {
            &::after {
                background: var-get($theme, 'error-color');
            }

            &::before {
                background: var-get($theme, 'fill-hover-border-color');
            }
        }
    }

    %radio-composite--disabled {
        &::after {
            border: $border-width $border-style var-get($theme, 'disabled-color');

            @if $bootstrap-theme and $theme-variant == 'dark' {
                background: color($color: 'surface');
            }
        }
    }

    %radio-composite--x--disabled {
        &::after {
            border: $border-width $border-style var-get($theme, 'disabled-fill-color');
        }

        @if $variant != 'bootstrap' {
            &::before {
                background: var-get($theme, 'disabled-fill-color');
                border: $border-width $border-style transparent;
            }
        }

        @if $bootstrap-theme {
            &::after {
                background: var-get($theme, 'disabled-fill-color');
            }
        }
    }

    %radio-label {
        color: var-get($theme, 'label-color');
        user-select: none;
        word-wrap: break-all;

        &:empty {
            display: none;
        }
    }

    %radio-label--hover {
        color: var-get($theme, 'label-color-hover');
    }

    %radio-label--invalid {
        color: var-get($theme, 'error-color');

        @if $variant == 'indigo' {
            color: var-get($theme, 'label-color');
        }
    }

    %radio-label--invalid--hover {
        color: var-get($theme, 'error-color');

        @if $variant == 'indigo' {
            color: var-get($theme, 'label-color-hover');
        }
    }

    %radio-label--disabled {
        color: var-get($theme, 'disabled-label-color');
    }

    %radio-label--after {
        margin-inline-start: $label-margin;
    }

    %radio-label--before {
        order: -1;
        margin-inline-end: $label-margin;
    }

    %radio-label--before,
    %radio-label--after {
        &:empty {
            margin: 0;
        }
    }

    %radio-ripple {
        display: $ripple-display;
        position: absolute;
        top: calc(50% - #{$ripple-radius});
        inset-inline-start: calc(50% - #{$ripple-radius});
        width: $ripple-size;
        height: $ripple-size;
        border-radius: border-radius(math.div($ripple-size, 2));
        overflow: hidden;
        pointer-events: none;
        filter: opacity(1);
    }

    %igx-radio--focused {
        @if $variant == 'fluent' {
            position: relative;
            $focus-outline-offset: rem(2px);

            &::after {
                content: '';
                position: absolute;
                inset: -$focus-outline-offset;
                box-shadow: 0 0 0 rem(1px) var-get($theme, 'focus-outline-color');
            }
        }

        @if $variant == 'bootstrap' {
            %radio-composite {
                border-radius: $border-radius;
                box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-outline-color');

                &::after {
                    border-color: var-get($theme, 'focus-border-color');
                }
            }
        }

        @if $variant == 'indigo' {
            %radio-composite {
                border-radius: $border-radius;
                box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color');
            }
        }
    }

    %igx-checkbox--focused-hovered {
        @if $variant == 'bootstrap' {
            %radio-composite:after {
                border-color: hsl(from var-get($theme, 'focus-border-color') h calc(s * 1.12) calc(l * 0.82));
            }
        }
    }

    %igx-radio--focused-checked {
        @if $variant == 'bootstrap' {
            %radio-composite::after {
                border-color: transparent;
            }
        }

        @if $variant == 'indigo' {
            %radio-composite {
                box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-filled');
            }
        }
    }

    %igx-radio--focused--invalid {
        @if $variant == 'bootstrap' {
            %radio-composite {
                box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-outline-color-error');

                &::after {
                    border: $border-width $border-style var-get($theme, 'error-color');
                }
            }

            &:hover {
                %radio-composite::after {
                    border: $border-width $border-style var-get($theme, 'error-color-hover');
                }
            }
        } @else if $variant == 'indigo' {
            %radio-composite {
                box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-error');
            }
        }
    }

    %igx-radio--focused--invalid--checked {
        %radio-composite {
            &::after {
                border: $border-width $border-style var-get($theme, 'error-color');
            }

            @if $variant != 'bootstrap' {
                &::before {
                    background: var-get($theme, 'error-color');
                    border-color: var-get($theme, 'error-color');
                }
            }
        }
    }

    %radio-composite--x--invalid--hover {
        @if $bootstrap-theme {
            &::after {
                background: var-get($theme, 'error-color-hover');
                border-color: var-get($theme, 'error-color-hover');
            }
        } @else {
            &::before {
                background: var-get($theme, 'error-color-hover');
                border-color: var-get($theme, 'error-color-hover');
            }

            &::after {
                border: $border-width $border-style var-get($theme, 'error-color-hover');
            }
        }
    }

    %radio-ripple--hover {
        background: var-get($theme, 'empty-color');
        transition: background .2s $ease-out-quad;
        opacity: .06;

        @if $theme-variant == 'dark' {
            opacity: .12;
        }
    }

    %radio-ripple--hover-checked {
        background: var-get($theme, 'fill-color');
    }

    %radio-ripple--hover-invalid {
        background: var-get($theme, 'error-color');
    }

    %radio-ripple--focused {
        background: var-get($theme, 'empty-color');
        transition: background .2s $ease-out-quad;
        opacity: .12;

        @if $theme-variant == 'dark' {
            opacity: .24;
        }
    }

    %radio-ripple--focused-checked {
        background: var-get($theme, 'fill-color');
    }

    %radio-ripple--focused-invalid {
        background: var-get($theme, 'error-color');
    }

    %radio-ripple--pressed {
        opacity: .12;

        @if $theme-variant == 'dark' {
            opacity: .24;
        }
    }

    %radio-group-display {
        display: grid;
        column-gap: $horizontal-group-margin;
        align-items: start;
        width: max-content;
    }

    %radio-group-display:not(%radio-group-display--vertical) {
        [igxLabel] {
            margin-block-end: rem(16px);
        }

        igx-radio {
            grid-row: 2;
        }
    }

    %radio-group-display--vertical {
        row-gap: $vertical-group-margin;

        [igxLabel] {
            margin-block-end: if($variant == 'material', rem(16px), rem(8px));
        }

        &%radio-group-display--before {
            igx-radio,
            [igxLabel] {
                justify-self: flex-end;
            }
        }
    }

    %radio-group-display--disabled {
        [igxLabel] {
            color: var-get($theme, 'disabled-color');
        }
    }
}

/// Adds typography styles for the igx-radio component.
/// Uses the 'subtitle-1' category from the typographic scale.
/// @group typography
/// @param {Map} $categories [(label: 'subtitle-1')] - The categories from the typographic scale used for type styles.
@mixin radio-typography(
    $categories: (label: 'subtitle-1')

) {
    $label: map.get($categories, 'label');

    %radio-label {
        @include type-style($label) {
            margin-top: 0;
            margin-bottom: 0;
        }
    }
}