////
/// @group themes
/// @access public
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
////

/// If only background color is specified,
/// the idle item color will be assigned automatically to a contrasting color.
///
/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
///
/// @param {Color} $item-text-color [null] - The color used for the tab text color.
/// @param {Color} $item-background [null] - The background color used for the tabs header.
/// @param {Color} $item-hover-background [null] - The background used for the tabs on hover.
/// @param {Color} $item-hover-color [null] - The text color used for the tabs on hover.
///
/// @param {Color} $item-active-color [null] - The color used for the active tabs text.
/// @param {Color} $item-active-icon-color [null] - The color used for the active tabs icon.
/// @param {Color} $item-active-background [null] - The color used for the active/focused tab background.
///
/// @param {Color} $indicator-color [null] - The color used for the active tab indicator.
/// @param {Color} $button-color [null] - The color used for the button icon/text color.
/// @param {Color} $button-hover-color [null] - The color used for the button icon/text color on hover.
/// @param {Color} $button-background [null] - The color used for the button background.
/// @param {Color} $button-hover-background [null] - The color used for the button background on hover.
///
/// @param {Color} $tab-ripple-color [null] - The color used for the button background.
/// @param {Color} $button-ripple-color [null] - The color used for the button background on hover.
/// @param {Bool} $disable-shadow [true] - Sets the tabs header shadow visibility.
///
/// @requires $default-palette
/// @requires $light-schema
/// @requires apply-palette
/// @requires extend
/// @requires igx-elevation
/// @requires text-contrast
///
/// @example scss Set a custom background color
///   $my-tabs-theme: igx-tabs-theme(
///      $item-background: orange
///    );
///   // Pass the theme to the igx-tabs component mixin
///   @include igx-tabs($my-tabs-theme);

@function igx-tabs-theme(
    $palette: $default-palette,
    $schema: $light-schema,

    $item-text-color: null,
    $item-background: null,

    $item-hover-background: null,
    $item-hover-color: null,

    $item-active-color: null,
    $item-active-icon-color: null,
    $item-active-background: null,
    $indicator-color: null,

    $button-color: null,
    $button-background: null,
    $button-hover-background: null,
    $button-hover-color: null,

    $tab-ripple-color: null,
    $button-ripple-color: null,

    $disable-shadow: true
) {
    $name: 'igx-tabs';
    $tabs-schema: ();

    @if map-has-key($schema, $name) {
        $tabs-schema: map-get($schema, $name);
    } @else {
        $tabs-schema: $schema;
    }

    $theme: apply-palette($tabs-schema, $palette);

    $tab-area-shadow: if($disable-shadow == true, none, igx-elevation($elevations, 1));

    @if not($item-text-color) and $item-background {
        @if type-of($item-background) == 'color' {
            $item-text-color: rgba(text-contrast($item-background), .54);
        }
    }

    @if not($item-hover-color) and $item-background {
        $item-hover-color: text-contrast($item-background);
    }

    @if not($item-hover-color) and $item-hover-background {
        $item-hover-color: text-contrast($item-hover-background);
    }

    @if not($item-active-icon-color) and $item-active-background {
        $item-active-icon-color: text-contrast($item-active-background);
    }

    @if not($item-active-icon-color) and $item-background {
        $item-active-icon-color: text-contrast($item-background);
    }

    @if not($indicator-color) and $item-background {
        $indicator-color: text-contrast($item-background);
    }

    @if not($item-active-color) and $item-active-icon-color {
        $item-active-color: $item-active-icon-color;
    }


    // Button
    @if not($button-color) and $item-background {
        $button-color: text-contrast($item-background);
    }

    @if not($button-color) and $button-background {
        $button-color: text-contrast($button-background);
    }

    @if not($button-color) and $item-background {
        $button-background: transparent;
    }

    @if not($button-hover-color) and $button-hover-background {
        $button-hover-color: text-contrast($button-hover-background);
    }

    @if not($button-hover-background) and $item-background {
        $button-hover-color: text-contrast($item-background);
    }

    @if not($button-background) and $item-background {
        @if type-of($item-background) == 'color' and lightness($item-background) > 50 {
            $button-background: transparent;
        } @else {
            $button-background: rgba(255, 255, 255 , .1);
        }
    }

    @if not($button-hover-background) and $item-background {
        @if type-of($item-background) == 'color' and lightness($item-background) > 50 {
            $button-hover-background: rgba(0, 0, 0, .05);
        } @else {
            $button-hover-background: rgba(255, 255, 255 , .14);
        }
    }

    @if not($button-ripple-color) and $button-background {
        @if type-of($item-background) == 'color' and lightness($item-background) > 50 {
            $button-ripple-color: rgba(0, 0, 0, .4);
        } @else {
            $button-ripple-color: rgba(255, 255, 255, .4);
        }
    }

    // Button end

    @if not($tab-ripple-color) and $item-active-background {
        $tab-ripple-color: text-contrast($item-active-background);
    }

    @if not($tab-ripple-color) and $item-background {
        $tab-ripple-color: text-contrast($item-background);
    }

    @return extend($theme, (
        name: $name,
        palette: $palette,
        item-text-color: $item-text-color,
        item-background: $item-background,
        item-hover-color: $item-hover-color,
        item-hover-background: $item-hover-background,
        item-active-color: $item-active-color,
        item-active-icon-color: $item-active-icon-color,
        item-active-background: $item-active-background,
        indicator-color: $indicator-color,
        button-color: $button-color,
        button-background: $button-background,
        button-hover-background:$button-hover-background,
        button-hover-color:$button-hover-color,
        tab-ripple-color: $tab-ripple-color,
        button-ripple-color: $button-ripple-color,
        tab-area-shadow: $tab-area-shadow,
    ));
}

/// @param {Map} $theme - The theme used to style the component.
/// @requires {mixin} igx-root-css-vars
/// @requires {mixin} igx-css-vars
/// @requires {mixin} ellipsis
/// @requires igx-ripple-theme
/// @requires {mixin} igx-ripple
/// @requires igx-elevation
/// @requires $elevations
/// @requires rem
/// @requires --var
@mixin igx-tabs($theme) {
    @include igx-root-css-vars($theme);
    $item-min-width: 90px;
    $item-max-width: 360px;

    $item-padding: 0 rem(16px);
    $tabs-height: rem(48px);
    $tabs-height-icon: rem(72px);
    $tabs-animation-function: cubic-bezier(.35, 0, .25, 1);
    $icon-label-space: rem(12px);

    $tabs-ripple-theme: igx-ripple-theme($color: --var($theme, 'tab-ripple-color'));
    $button-ripple-theme: igx-ripple-theme($color: --var($theme, 'button-ripple-color'));

    %igx-tabs {
        display: flex;
        flex-direction: column;
    }

    %igx-tabs__header {
        display: flex;
        align-items: center;
        overflow: hidden;
        background: --var($theme, 'item-background');
        box-shadow: --var($theme, 'tab-area-shadow');
    }

    %igx-tabs__content-fixed,
    %igx-tabs__header-wrapper-fixed {
        flex: 1 1 auto;
        overflow: hidden;
    }

    // ITEM HOLDER (The element that scrolls)
    %igx-tabs__content-fluid,
    %igx-tabs__header-wrapper-fluid {
        position: relative;
        flex-wrap: nowrap;
        transition: transform .2s $tabs-animation-function;
    }

    %igx-tabs__header-wrapper-fluid {
        display: inline-flex;
        align-items: center;
        min-width: 100%;
    }

    %igx-tabs__content-fluid {
        display: flex;
    }

    // MENU ITEM
    %igx-tabs__header-menu-item {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: $item-min-width;
        max-width: $item-max-width;
        word-wrap: break-word;
        height: $tabs-height;
        // Flex basis & shrink are Needed for IE11
        flex-basis: auto;
        flex-shrink: 0;
        padding: $item-padding;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        transition: all .3s $tabs-animation-function;
        user-select: none;
        background: --var($theme, 'item-background');
        color: --var($theme, 'item-text-color');
        outline: 0;

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

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

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

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

    %igx-tabs__header-menu-item--selected {
        outline: 0;
        color: --var($theme, 'item-active-color');

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

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

        %igx-tabs__header-menu-item-icon {
            color: --var($theme, 'item-active-icon-color');

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

    %igx-tabs__header-menu-item--disabled {
        outline: 0;
        opacity: .5;
        cursor: default;
        pointer-events: none;
    }

    %igx-tabs__header-menu-item-icon {
        display: flex;
        justify-content: center;
        align-items: center;

        + %igx-tabs__item-label {
            @include ellipsis();
            padding-top: $icon-label-space;
        }
    }

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

    // SCROLL BUTTONS
    %igx-tabs__header-button {
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        padding: 0;
        min-width: rem(48px);
        width: rem(48px);
        min-height: $tabs-height;
        height: $tabs-height;
        cursor: pointer;
        position: relative;
        background: --var($theme, 'button-background');
        color: --var($theme, 'button-color');
        outline: 0;
        box-shadow: igx-elevation($elevations, 4);

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

        &:focus {
            outline: 0;
            background: --var($theme, 'button-hover-background');
        }

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

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

    %igx-tabs__header-button--hidden {
        visibility: hidden;
    }

    %igx-tabs__header-button--none {
        display: none;
    }

    %igx-tabs__item-label {
        word-break: break-word;
        max-width: 100%;
        text-align: center;

        + %igx-tabs__header-menu-item-icon {
            padding-top: $icon-label-space;
        }
    }

    %igx-tabs__group {
        display: inline-block;
        min-width: 100%;
    }

    %igx-tabs--fixed {
        %igx-tabs__header-menu-item {
            flex: 1 1 auto;
            width: 100%;
        }
    }

    %igx-tabs--icons {
        %igx-tabs__header-button,
        %igx-tabs__header-menu-item {
            min-height: $tabs-height-icon;
            height: $tabs-height-icon;
        }
    }
}

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

    %igx-tabs__item-label {
        @include igx-type-style($type-scale, $label) {
            margin-top: 0;
            margin-bottom: 0;
        }
    }
}