/* stylelint-disable max-nesting-depth */
@use 'sass:map';
@use 'sass:meta';
@use 'sass:list';
@use '../../base' as *;
@use '../../../styles/themes/scoping' as *;

/// @access private
/// @see {mixin} tokens
/// @param {Map} $theme - The theme used to style the component.
@mixin icon-button($themes...) {
    $_theme: null;

    @each $key, $theme in meta.keywords($themes) {
        @if not $_theme {
            $_theme: $theme;
        }
    }

    $_t: map.get($_theme, '_meta', 'theme');
    $_v: map.get($_theme, '_meta', 'variant');

    $icon-in-button-size: map.get(
        (
            'material': rem(18px),
            'fluent': rem(18px),
            'bootstrap': rem(18px),
            'indigo': rem(16px),
        ),
        $_t
    );

    .igx-icon-button {
        --ig-icon-size: #{$icon-in-button-size};

        &:is(a, span) {
            @include restore-properties(
                position,
                display,
                align-items,
                justify-content,
                width,
                height,
                font-size,
                border,
                border-radius,
                background,
                color,
                box-shadow,
                cursor,
                outline
            );

            text-decoration: none;
        }
    }

    @each $key, $theme in meta.keywords($themes) {
        @include tokens($theme, $mode: 'scoped');
    }

    @include layer(base) {
        $flat-theme: null;
        $contained-theme: null;
        $outlined-theme: null;
        $variant: 'material';

        $required: ('flat', 'contained', 'outlined');
        $added: ();
        $missing: ();

        @each $key, $theme in meta.keywords($themes) {
            $type: map.get($theme, _meta, type);

            $added: list.append($added, $key);

            @if $type == 'flat' {
                $flat-theme: $theme;
            } @else if $type == 'contained' {
                $contained-theme: $theme;
            } @else if $type == 'outlined' {
                $outlined-theme: $theme;
            }

            $variant: map.get($theme, '_meta', 'theme');
        }

        @each $item in $required {
            @if not(list.index($added, $item)) {
                $missing: list.append($missing, '$#{$item}', $separator: comma);
            }
        }

        @if list.length($missing) != 0 {
            @error meta.inspect(string.unquote("Missing theme properties:") #{$missing});
        }

        $items-gap: (
            comfortable: rem(9px),
            cosy: rem(6px),
            compact: rem(3px),
        );

        $btn-indent: rem(3px);

        %fluent-focus-ring {
            content: '';
            position: absolute;
            pointer-events: none;
            inset-block-start: $btn-indent;
            inset-inline-start: $btn-indent;
            width: calc(100% - #{$btn-indent} * 2);
            height: calc(100% - #{$btn-indent} * 2);
        }

        %igx-icon-button-display {
            @include sizable();

            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: var(--ig-icon-size, #{$icon-in-button-size});
            height: var(--ig-icon-size, #{$icon-in-button-size});
            font-size: var(--ig-icon-size, #{$icon-in-button-size});
            cursor: pointer;

	        &:focus-visible {
		        outline: none;
	        }
        }

        %igx-icon-button--ready {
            @if $variant == 'fluent' {
                transition: color 0.15s ease-out, background 0.15s ease-out;
            } @else if $variant == 'bootstrap' {
                transition: box-shadow 0.15s ease-out, color 0.15s ease-out;
            } @else if $variant == 'indigo' {
                transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0.15s ease-in-out;
            } @else {
                transition: box-shadow 0.2s ease-in, background 0.15s ease-out;
                transition-delay: 0.05s;
            }
        }

        %igx-icon-button--flat {
            --component-size: var(
                --ig-size,
                #{var-get($flat-theme, 'default-size')}
            );
            width: var-get($flat-theme, 'size');
            height: var-get($flat-theme, 'size');
            background: var-get($flat-theme, 'background');
            color: var-get($flat-theme, 'foreground');
            border: rem(1px) solid var-get($flat-theme, 'border-color');
            border-radius: var-get($flat-theme, 'border-radius');

            &:hover {
                background: var-get($flat-theme, 'hover-background');
                color: var-get($flat-theme, 'hover-foreground');
            }

            @if $variant == 'material' {
                &:active {
                    background: var-get($flat-theme, 'focus-background');
                    color: var-get($flat-theme, 'focus-foreground');
                }
            } @else {
                &:active {
                    background: var-get($flat-theme, 'active-background');
                    color: var-get($flat-theme, 'active-foreground');
                }
            }
        }

        %igx-icon-button--flat.igx-button--focused {
            background: var-get($flat-theme, 'focus-background');
            color: var-get($flat-theme, 'focus-foreground');

            &:hover {
                background: var-get($flat-theme, 'focus-hover-background');
                color: var-get($flat-theme, 'focus-hover-foreground');
            }

            &:active {
                background: var-get($flat-theme, 'active-background');
                color: var-get($flat-theme, 'active-foreground');
            }

            @if $variant == 'fluent' {
                &::after {
                    @extend %fluent-focus-ring;

                    box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-border-color');
                }
            }

            @if $variant == 'bootstrap' {
                box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color');
            }

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

        %igx-icon-button--contained {
            --component-size: var(
                --ig-size,
                #{var-get($contained-theme, 'default-size')}
            );
            width: var-get($contained-theme, 'size');
            height: var-get($contained-theme, 'size');
            background: var-get($contained-theme, 'background');
            color: var-get($contained-theme, 'foreground');
            border: rem(1px) solid var-get($contained-theme, 'border-color');
            border-radius: var-get($contained-theme, 'border-radius');

            &:hover {
                background: var-get($contained-theme, 'hover-background');
                color: var-get($contained-theme, 'hover-foreground');
            }

            @if $variant == 'material' {
                &:active {
                    background: var-get($contained-theme, 'focus-background');
                    color: var-get($contained-theme, 'focus-foreground');
                }
            } @else {
                &:active {
                    background: var-get($contained-theme, 'active-background');
                    color: var-get($contained-theme, 'active-foreground');
                }
            }
        }

        %igx-icon-button--contained.igx-button--focused {
            background: var-get($contained-theme, 'focus-background');
            color: var-get($contained-theme, 'focus-foreground');

            @if $variant != 'fluent' {
                border-color: var-get($contained-theme, 'focus-border-color');
            }

            &:hover {
                background: var-get($contained-theme, 'focus-hover-background');
                color: var-get($contained-theme, 'focus-hover-foreground');
            }

            &:active {
                background: var-get($contained-theme, 'active-background');
                color: var-get($contained-theme, 'active-foreground');
            }

            @if $variant == 'fluent' {
                &::after {
                    @extend %fluent-focus-ring;
                    box-shadow: 0 0 0 rem(1px) var-get($contained-theme, 'focus-border-color');
                }
            }

            @if $variant == 'bootstrap' {
                box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color');
            }

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

        %igx-icon-button--outlined {
            --component-size: var(--ig-size, #{var-get($outlined-theme, 'default-size')});

            width: var-get($outlined-theme, 'size');
            height: var-get($outlined-theme, 'size');
            background: var-get($outlined-theme, 'background');
            color: var-get($outlined-theme, 'foreground');
            border: rem(1px) solid var-get($outlined-theme, 'border-color');
            border-radius: var-get($outlined-theme, 'border-radius');

            @if $variant == 'indigo' {
                border-width: rem(2px);

                &:hover,
                &:active {
                    border-color: var-get($outlined-theme, 'foreground');
                }
            }

            &:hover {
                background: var-get($outlined-theme, 'hover-background');
                color: var-get($outlined-theme, 'hover-foreground');

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

            @if $variant == 'material' {
                border: none;

                &::after {
                    position: absolute;
                    content: '';
                    inset: 0;
                    box-shadow: inset 0 0 0 rem(1px) var-get($outlined-theme, 'border-color');
                    border-radius: inherit;
                }

                &:active {
                    background: var-get($outlined-theme, 'focus-background');
                    color: var-get($outlined-theme, 'focus-foreground');
                }
            } @else {
                &:active {
                    background: var-get($outlined-theme, 'active-background');
                    color: var-get($outlined-theme, 'active-foreground');

                    @if $variant == 'bootstrap' {
                        border-color: var-get(
                            $outlined-theme,
                            'focus-border-color'
                        );
                    }
                }
            }
        }

        %igx-icon-button--outlined.igx-button--focused {
            background: var-get($outlined-theme, 'focus-background');
            color: var-get($outlined-theme, 'focus-foreground');

            @if $variant == 'material' {
                border: none;

                &::after {
                    box-shadow: inset 0 0 0 rem(1px) var-get($outlined-theme, 'focus-border-color');
                }
            }

            @if $variant != 'bootstrap' {
                border-color: var-get($outlined-theme, 'focus-border-color');
            }

            &:hover {
                background: var-get($contained-theme, 'focus-hover-background');
                color: var-get($contained-theme, 'focus-hover-foreground');

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

            &:active {
                background: var-get($outlined-theme, 'active-background');
                color: var-get($outlined-theme, 'active-foreground');

                @if $variant == 'bootstrap' {
                    border-color: var-get(
                        $outlined-theme,
                        'focus-border-color'
                    );
                }
            }

            @if $variant == 'fluent' {
                border: rem(1px) solid var-get($outlined-theme, 'border-color');

                &::after {
                    @extend %fluent-focus-ring;

                    box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-border-color');
                }
            }

            @if $variant == 'bootstrap' {
                box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color');
            }

            @if $variant == 'indigo' {
                border-color: var-get($outlined-theme, 'border-color');
                box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'focus-border-color');

                &:hover,
                &:active {
                    border-color: var-get($outlined-theme, 'foreground');
                }
            }
        }

        %igx-button--disabled {
            background: var-get($flat-theme, 'disabled-background');
            color: var-get($flat-theme, 'disabled-foreground');
            border-color: var-get($flat-theme, 'disabled-border-color');
            pointer-events: none;
            box-shadow: none;

            &:focus {
                box-shadow: none;
            }
        }
    }
}

/// Adds typography styles for the igx-icon-button component.
/// Uses the 'button' category from the typographic scale.
/// @group typography
/// @param {String} $categories [(text: 'button')] - The category from the typographic scale used for type styles.
@mixin icon-button-typography(
    $categories: (
        text: 'button',
    )
) {
    $text: map.get($categories, 'text');

    %igx-icon-button-display {
        @include type-style($text) {
            text-align: center;
        }
    }
}