@use 'sass:map';
@use 'sass:meta';
@use '../../base' as *;
@use '../ripple/ripple-theme' as *;
@use '../ripple/ripple-component' as *;
@use '../../themes/schemas' as *;

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

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

    $item-min-width: rem(90px);
    $item-max-width: rem(360px);
    $item-min-height: map.get((
        'material': rem(48px),
        'fluent': rem(44px),
        'bootstrap': rem(48px),
        'indigo': rem(40px)
    ), $variant);

    $tabs-animation-function: cubic-bezier(.35, 0, .25, 1);

    $item-padding: pad-block(rem(11px)) pad-inline(rem(16px));

    $tabs-ripple-theme: ripple-theme(
        $schema: $light-material-schema,
        $color: var-get($theme, 'tab-ripple-color')
    );

    $button-ripple-theme: ripple-theme(
        $schema: $light-material-schema,
        $color: var-get($theme, 'button-ripple-color')
    );

    %tabs-header,
    %tabs-header-button,
    %tabs-header-item-inner,
    %tabs-header-content {
        display: flex;
        align-items: center;
    }

    %tabs-display {
        --nav-btn-border-color: #{var-get($theme, 'border-color')};

        display: flex;
        flex-direction: column;
        overflow: hidden;
        text-align: initial;
    }

    %tabs-header {
        overflow: hidden;
        flex: 0 0 auto;
        z-index: 1;

        @if $variant == 'material' or $variant == 'bootstrap' {
            background: var-get($theme, 'item-background');
        }

        @if $bootstrap-theme {
            position: relative;

            &::after {
                content: '';
                position: absolute;
                bottom: 0;
                inset-inline-start: 0;
                width: 100%;
                height: rem(1px);
                background: var-get($theme, 'border-color');
                z-index: 0;
            }
        }
    }

    %tabs-header-content {
        flex: 1 1 auto;
        overflow: hidden;
        scroll-behavior: smooth;
    }

    %tabs-header-wrapper {
        position: relative;
        flex-grow: 1;
    }

    %tabs-header-scroll {
        display: flex;
        height: 100%;
    }

    %tabs-header-button {
        align-items: center;
        justify-content: center;
        z-index: 1;
        border: none;
        padding: 0;
        min-width: rem(48px);
        width: rem(48px);
        cursor: pointer;
        position: relative;
        background: var-get($theme, 'button-background');
        color: var-get($theme, 'button-color');
        outline: 0;
        align-self: stretch;
        height: auto;
        transition: none;
        border-radius: border-radius(0);

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

        &:focus {
            outline: 0;

            @if $variant != 'indigo' {
                background: var-get($theme, 'button-hover-background');
            }
        }

        &::-moz-focus-inner {
            // remove focus dotted border in firefox
            border: 0;
        }

        &:disabled {
            color: var-get($theme, 'button-disabled-color');
            cursor: default;
            pointer-events: none;
        }

        &--none {
            display: none;
        }

        @if $indigo-theme {
            min-width: rem(40px);
            width: rem(40px);

            &::after {
                content: '';
                position: absolute;
                pointer-events: none;
                width: 100%;
                height: 100%;
                border-bottom: rem(1px) solid var(--nav-btn-border-color);
            }
        }

        @include ripple($button-ripple-theme);
        @include css-vars($button-ripple-theme);

        igx-icon {
            $icon-size: #{if($variant == 'indigo', rem(16px), rem(24px))};

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

        [dir='rtl'] & {
            transform: scaleX(-1);
        }
    }

    %tabs-header-item {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        min-width: $item-min-width;
        max-width: $item-max-width;
        min-height: $item-min-height;
        word-wrap: break-word;
        // Flex basis & shrink are Needed for IE11
        flex-basis: auto;
        flex-shrink: 0;
        padding: $item-padding;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        user-select: none;
        background: var-get($theme, 'item-background');
        color: var-get($theme, 'item-text-color');
        outline: 0;

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

        @if $bootstrap-theme {
            padding-block: pad-block(rem(12px));
            border-start-start-radius: var-get($theme, 'border-radius');
            border-start-end-radius: var-get($theme, 'border-radius');
        }

        @if $not-bootstrap-theme {
            transition: all .3s $tabs-animation-function;
            border: rem(1px) solid var-get($theme, 'border-color');
            border-radius: var-get($theme, 'border-radius');

            &:hover,
            &:focus {
                border: rem(1px) solid var-get($theme, 'border-color--hover');
            }
        }

        @if $indigo-theme {
            border-top: rem(1px) solid transparent;
            border-inline: none;

            &:hover,
            &:focus {
                border-top: rem(1px) solid transparent;
                border-inline: none;
                border-bottom: rem(1px) solid var-get($theme, 'border-color--hover');
            }

            igx-icon {
                --ig-size: 2;
            }
        }

        > * {
            margin-inline-start: rem(if($variant != 'indigo', 12px, 8px));

            &:first-child {
                margin-inline-start: 0;
            }
        }

        &::-moz-focus-inner {
            border: 0;
        }

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

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

            @if $bootstrap-theme {
                box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color--hover');
            }
        }

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

        @include ripple($tabs-ripple-theme);
        @include css-vars($tabs-ripple-theme);
    }

    %tabs-header-item--selected {
        outline: 0;
        color: var-get($theme, 'item-active-color');
        background: var-get($theme, 'item-active-background');

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

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

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

        @if $bootstrap-theme {
            position: relative;
            box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color');
            z-index: 1;

            &:not(:focus) {
                &::before {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    inset-inline-start: 0;
                    width: 100%;
                    height: rem(1px);
                    background: linear-gradient(
                            to right,
                            var-get($theme, 'border-color') 1px,
                            var-get($theme, 'item-active-background') 1px,
                            var-get($theme, 'item-active-background') calc(100% - 1px),
                            var-get($theme, 'border-color') calc(100% - 1px)
                    );
                    z-index: -1;
                }
            }

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

                &::before {
                    background: linear-gradient(
                            to right,
                            var-get($theme, 'border-color') 1px,
                            var-get($theme, 'item-active-hover-background') 1px,
                            var-get($theme, 'item-active-hover-background') calc(100% - 1px),
                            var-get($theme, 'border-color') calc(100% - 1px)
                    );
                }
            }
        }

        @if $variant == 'fluent' {
            %tabs-header-item-inner > [igxtabheaderlabel] {
                font-weight: 600;
            }
        }
    }

    %tabs-header-item:focus,
    %tabs-header-item--selected:focus {
        @if $bootstrap-theme {
            border: none;
            box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'item-hover-color');
            border-bottom-left-radius: rem(4px);
            border-bottom-right-radius: rem(4px);
            z-index: 1;

            &::after {
                display: none;
            }
        }
    }

    %tabs-header-item--disabled {
        outline: 0;
        color: var-get($theme, 'item-disabled-color');
        cursor: default;
        pointer-events: none;

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

    %tabs-header-item-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;

        > [igxtabheaderlabel] {
            @include line-clamp(2, true, true);
        }

        > [igxtabheadericon] {
            margin-bottom: rem(8px);

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    %tabs-header-active-indicator {
        position: absolute;
        bottom: 0;
        // We need to explicitly set the default for IE 11
        left: 0;
        transform: translateX(0);
        height: rem(2px);
        min-width: $item-min-width;
        background: var-get($theme, 'indicator-color');
        transition: transform .3s $tabs-animation-function, width .2s $tabs-animation-function;

        @if $bootstrap-theme {
            display: none;
        }

        @if $indigo-theme {
            height: rem(3px);
        }
    }

    %tabs-panels {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
    }

    %tabs-panel {
        position: absolute;
        inset: 0;
        overflow-x: hidden;
        overflow-y: auto;
        flex: 1 1 auto;

        &::-moz-focus-inner {
            // remove focus dotted border in firefox
            border: 0;
        }

        &:focus {
            outline-width: 0;
        }

        &[tabindex='0'] {
            position: relative;
        }
    }

    %tabs-header-scroll--start {
        justify-content: flex-start;
    }

    %tabs-header-scroll--end {
        justify-content: flex-end;
        min-width: max-content;
    }

    %tabs-header-scroll--center {
        justify-content: center;
        min-width: max-content;
    }

    %tabs-header-scroll--justify {
        %tabs-header-item {
            flex-basis: 0;
            flex-grow: 1;
            max-width: 100%;
        }
    }
}

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

    %tabs-header-item-inner > [igxtabheaderlabel] {
        @include type-style($label) {
            margin-top: 0;
            margin-bottom: 0;
            @content;
        }
    }
}