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

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin button-group($theme) {
    @include css-vars($theme);

    $group-item-border-thickness: rem(1px);
    $group-items-margin: rem(10px, 16px);
    $outline-btn-indent: rem(2px);

    $variant: map.get($theme, '_meta', 'theme');
    $bootstrap-theme: $variant == 'bootstrap';
    $indigo-theme: $variant == 'indigo';
    $group-item-min-width: map.get((
        'material': rem(42px),
        'fluent': rem(42px),
        'bootstrap': rem(42px),
        'indigo': rem(32px),
    ), $variant);

    %item-overlay {
        &::before {
            content: '';
            z-index: -1;
            position: absolute;
            pointer-events: none;
            width: 100%;
            height: 100%;
            background: var-get($theme, 'item-focused-background');
        }
    }

    %igx-group-display {
        display: flex;
        box-shadow: var-get($theme, 'elevation');
        border-radius: var-get($theme, 'border-radius');

        button {
            // The margin here is required to fix a bug in Safari #7858
            margin-top: 0;
            margin-inline-end: 0;
            margin-bottom: 0;
        }
    }

    %igx-group-item {
        border: $group-item-border-thickness solid var-get($theme, 'item-border-color');
        color: var-get($theme, 'item-text-color');
        background: var-get($theme, 'item-background');
        min-width: $group-item-min-width;
        display: flex;
        flex: 1 0 0%;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        cursor: pointer;
        user-select: none;
        position: relative;
        z-index: 0;

        &[igxButton] {
            border-radius: 0;
            border-color: var-get($theme, 'item-border-color');
        }

        igx-icon {
            color: var-get($theme, 'item-icon-color');
        }

        &:not(:nth-child(1)) {
            margin-inline-start: rem(-1px);
        }

        &:first-of-type {
            border-start-start-radius: inherit;
            border-end-start-radius: inherit;
        }

        &:last-of-type {
            border-start-end-radius: inherit;
            border-end-end-radius: inherit;
        }

        &[igxButton][disabled='true'] {
            color: var-get($theme, 'disabled-text-color');
            background: var-get($theme, 'disabled-background-color');
            border-color: var-get($theme, 'item-disabled-border');

            igx-icon {
                color: var-get($theme, 'disabled-text-color');
            }
        }

        &:hover {
            color: var-get($theme, 'item-hover-text-color');
            background: var-get($theme, 'item-hover-background');
            border-color: var-get($theme, 'item-hover-border-color');

            igx-icon {
                color: var-get($theme, 'item-hover-icon-color');
            }
        }

        @if $variant != 'fluent' {
            &:active {
                color: var-get($theme, 'item-hover-text-color');
                background: var-get($theme, 'item-hover-background');
                border-color: var-get($theme, 'item-hover-border-color');

                igx-icon {
                    color: var-get($theme, 'item-hover-icon-color');
                }
            }
        }

        @if $variant == 'material' {
            &:hover,
            &:active {
                @extend %item-overlay;

                background: var-get($theme, 'item-background');
            }

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

        @if $variant == 'bootstrap' {
            &:active {
                @extend %item-overlay;
            }
        }

        @if $variant == 'fluent' {
            igx-icon {
                $icon-size: rem(18px);

                --ig-icon-size: #{$icon-size};
            }

            &:active {
                background: var-get($theme, 'item-focused-background');
                color: var-get($theme, 'item-text-color');
            }
        }

        @if $variant == 'indigo' {
            padding-inline: pad-inline(rem(6px), rem(8px), rem(10px));

            igx-icon {
                $icon-size: rem(16px);

                --ig-icon-size: #{$icon-size};
            }

            &:hover {
                border-color: var-get($theme, 'item-hover-border-color');
                z-index: 1;
            }

            &:active {
                color: var-get($theme, 'item-hover-text-color');
                background: var-get($theme, 'item-hover-background');
                border-color: var-get($theme, 'item-hover-border-color');
                z-index: 2;
            }
        }

        &[igxButton].igx-button--focused {
            &:hover {
                color: var-get($theme, 'item-hover-text-color');
                background: var-get($theme, 'item-hover-background');

                igx-icon {
                    color: var-get($theme, 'item-hover-icon-color');
                }
            }

            @if $variant != 'fluent' {
                color: var-get($theme, 'item-hover-text-color');
                background: var-get($theme, 'item-hover-background');
                border-color: var-get($theme, 'item-hover-border-color');

                igx-icon {
                    color: var-get($theme, 'item-hover-icon-color');
                }
            }

            @if $variant == 'material' {
                @extend %item-overlay;

                background: var-get($theme, 'item-background');

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

                &:hover {
                    background: var-get($theme, 'item-background');

                    &::before {
                        background: var-get($theme, 'item-focused-hover-background');
                    }
                }

                &:active {
                    background: var-get($theme, 'item-background');
                    color: var-get($theme, 'item-hover-text-color');

                    igx-icon {
                        color: var-get($theme, 'item-hover-icon-color');
                    }

                    &::before {
                        background: var-get($theme, 'item-focused-background');
                    }
                }
            }

            @if $variant == 'bootstrap' {
                background: var-get($theme, 'item-background');
                z-index: 1;
                box-shadow: 0 0 0 rem(4px) var-get($theme, 'idle-shadow-color');

                &:active {
                    background: var-get($theme, 'item-hover-background');
                    color: var-get($theme, 'item-hover-text-color');

                    igx-icon {
                        color: var-get($theme, 'item-hover-icon-color');
                    }
                }
            }

            @if $variant == 'fluent' {
                background: var-get($theme, 'item-background');
                color: var-get($theme, 'item-text-color');

                igx-icon {
                    color: var-get($theme, 'item-icon-color');
                }

                &::after {
                    content: '';
                    position: absolute;
                    inset-block-start: $outline-btn-indent;
                    inset-inline-start: $outline-btn-indent;
                    pointer-events: none;
                    width: calc(100% - (#{$outline-btn-indent} * 2));
                    height: calc(100% - (#{$outline-btn-indent} * 2));
                    box-shadow: 0 0 0 rem(1px) var-get($theme, 'item-focused-border-color');
                }

                &:active {
                    background: var-get($theme, 'item-focused-background');
                }
            }

            @if $variant == 'indigo' {
                color: var-get($theme, 'item-focused-text-color');
                background: var-get($theme, 'item-focused-background');
                border-color: var-get($theme, 'item-focused-border-color');
                box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
                z-index: 2;

                igx-icon {
                    color: var-get($theme, 'item-icon-color');
                }

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

                &:active {
                    color: var-get($theme, 'item-hover-text-color');
                    background: var-get($theme, 'item-hover-background');
                    border-color: var-get($theme, 'item-hover-border-color');

                    igx-icon {
                        color: var-get($theme, 'item-hover-icon-color');
                    }
                }
            }
        }
    }

    %igx-group-item-vertical {
        &:not(:nth-child(1)) {
            margin-top: rem(-1px);
            margin-inline-start: 0;
        }

        &:first-of-type {
            border-start-start-radius: inherit;
            border-start-end-radius: inherit;
            border-end-start-radius: 0;
            border-end-end-radius: 0;
        }

        &:last-of-type {
            border-start-start-radius: 0;
            border-start-end-radius: 0;
            border-end-start-radius: inherit;
            border-end-end-radius: inherit;
        }
    }

    %igx-group-item-selected {
        color: var-get($theme, 'item-selected-text-color');
        background: var-get($theme, 'item-selected-background');
        border-color: var-get($theme, 'item-selected-border-color');
        position: relative;
        z-index: 1;

        &[igxButton] {
            border-color: var-get($theme, 'item-selected-border-color');
        }

        igx-icon {
            color: var-get($theme, 'item-selected-icon-color');
        }

        &:hover {
            border-color: var-get($theme, 'item-selected-hover-border-color');
            color: var-get($theme, 'item-selected-hover-text-color');
            background: var-get($theme, 'item-selected-hover-background');

            igx-icon {
                color: var-get($theme, 'item-selected-hover-icon-color');
            }
        }

        @if $variant == 'material' {
            &:hover {
                @extend %item-overlay;

                background: var-get($theme, 'item-selected-background');

                &::before {
                    background: var-get($theme, 'item-selected-hover-background');
                }
            }

            &:active {
                @extend %item-overlay;

                color: var-get($theme, 'item-selected-hover-text-color');
                background: var-get($theme, 'item-selected-background');
                border-color: var-get($theme, 'item-selected-border-color');

                igx-icon {
                    color: var-get($theme, 'item-selected-hover-icon-color');
                }

                &::before {
                    background: var-get($theme, 'item-selected-focus-background');
                }
            }
        }

        @if $variant == 'bootstrap' {
            &:active {
                @extend %item-overlay;

                color: var-get($theme, 'item-selected-text-color');
                border-color: var-get($theme, 'item-selected-border-color');
                background: var-get($theme, 'item-selected-hover-background');

                &::before {
                    background: var-get($theme, 'item-selected-focus-background');
                }
            }
        }

        @if $variant == 'fluent' {
            &:hover {
                background: var-get($theme, 'item-selected-background');
                color: var-get($theme, 'item-selected-text-color');

                @extend %item-overlay;

                &::before {
                    background: var-get($theme, 'item-selected-hover-background');
                }
            }

            &:active {
                background: var-get($theme, 'item-selected-focus-background');
                color: var-get($theme, 'item-selected-text-color');

                igx-icon {
                    color: var-get($theme, 'item-selected-icon-color');
                }
            }
        }

        @if $variant == 'indigo' {
            &:active {
                background: var-get($theme, 'item-selected-hover-background');
                color: var-get($theme, 'item-selected-hover-text-color');
                border-color: var-get($theme, 'item-selected-hover-border-color');

                igx-icon {
                    color: var-get($theme, 'item-selected-hover-icon-color');
                }
            }
        }

        &[igxButton].igx-button--focused {
            @if $variant != 'fluent' {
                &:hover {
                    color: var-get($theme, 'item-selected-hover-text-color');
                    background: var-get($theme, 'item-selected-hover-background');
                    border-color: var-get($theme, 'item-selected-hover-border-color');
                }

                &:active {
                    background: var-get($theme, 'item-selected-hover-background');
                    color: var-get($theme, 'item-selected-hover-text-color');

                    &::before {
                        background: var-get($theme, 'item-selected-focus-background');
                    }

                    igx-icon {
                        color: var-get($theme, 'item-selected-hover-icon-color');
                    }
                }
            }

            @if $variant == 'material' or $variant == 'fluent' {
                &:hover {
                    @extend %item-overlay;

                    &::before {
                        background: var-get($theme, 'item-selected-focus-hover-background');
                    }
                }
            }

            @if $variant == 'material' {
                background: var-get($theme, 'item-selected-background');
                color: var-get($theme, 'item-selected-hover-text-color');
                border-color: var-get($theme, 'item-selected-hover-border-color');

                &::before {
                    background: var-get($theme, 'item-selected-hover-background');
                }

                igx-icon {
                    color: var-get($theme, 'item-selected-hover-icon-color');
                }

                &:hover {
                    background: var-get($theme, 'item-selected-background');

                    igx-icon {
                        color: var-get($theme, 'item-selected-hover-icon-color');
                    }
                }

                &:active {
                    background: var-get($theme, 'item-selected-background');
                }
            }

            @if $variant == 'bootstrap' {
                color: var-get($theme, 'item-selected-text-color');
                border-color: var-get($theme, 'item-selected-border-color');
                background: var-get($theme, 'item-selected-background');
                box-shadow: 0 0 0 rem(4px) var-get($theme, 'selected-shadow-color');

                igx-icon {
                    color: var-get($theme, 'item-selected-icon-color');
                }
            }

            @if $variant == 'fluent' {
                background: var-get($theme, 'item-selected-background');
                color: var-get($theme, 'item-selected-text-color');

                igx-icon {
                    color: var-get($theme, 'item-selected-icon-color');
                }

                &:hover {
                    background: var-get($theme, 'item-selected-background');
                    color: var-get($theme, 'item-selected-text-color');

                    igx-icon {
                        color: var-get($theme, 'item-selected-hover-icon-color');
                    }
                }

                &:active {
                    background: var-get($theme, 'item-selected-focus-background');
                }
            }

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

                igx-icon {
                    color: var-get($theme, 'item-selected-icon-color');
                }

                &:hover,
                &:active {
                    border-color: var-get($theme, 'item-selected-hover-border-color');

                    igx-icon {
                        color: var-get($theme, 'item-selected-hover-icon-color');
                    }
                }
            }
        }

        &[igxButton][disabled='true'] {
            position: relative;

            &::before {
                position: absolute;
                content: '';
                top: 0;
                bottom: 0;
                inset-inline-end: 0;
                inset-inline-start: 0;
                background: var-get($theme, 'disabled-selected-background');
            }

            @if $variant == 'indigo' {
                color: var-get($theme, 'disabled-selected-text-color');
                background: var-get($theme, 'disabled-selected-background');
                border: none;

                igx-icon {
                    color: var-get($theme, 'disabled-selected-icon-color');
                }

                &::before {
                    display: none;
                }
            }
        }
    }

    %igx-group-vertical {
        flex-flow: column;
    }

    %igx-group-item-content {
        display: flex;
        align-items: center;
        flex-flow: row nowrap;
        min-width: 0;

        * ~ * {
            margin-inline-start: $group-items-margin;
        }
    }

    %igx-button-group__button-text {
        width: 100%;
        @include ellipsis();
    }
}

/// Adds typography styles for the igx-button-group 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 button-group-typography($categories: (text: 'button')) {
    $text: map.get($categories, 'text');

    %igx-group-item {
        @include type-style($text) {
            text-align: center;
        }
    }
}