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

/// If only background color is specified, text/icon color
/// will be assigned automatically to a contrasting color.
/// Does ___not___ apply for disabled state colors.
/// @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 {Map} $elevations [$elevations] - The elevations (shadows) map to be used.
///
/// @param {box-shadow} $shadow [null] - The shadow to be applied for the button group.
/// @param {Color} $item-text-color [null]- The text color for button group items.
/// @param {Color} $item-background [null] - The background color for button group items .
/// @param {Color} $item-border-color [null] - The border color between button group items.
///
/// @param {Color} $item-hover-text-color [null] - The hover text color for button group items.
/// @param {Color} $item-hover-background [null] - The hover background color for button group items.
///
/// @param {Color} $disabled-text-color [null]- The text/icon color for a disabled item in the button group.
/// @param {Color} $disabled-background-color [null] - The background color for a disabled item in the button group.
///
/// @param {Color} $item-selected-text-color [null]- The text color for a selected item in the button group.
/// @param {Color} $item-selected-background [null] - The background color for a selected item in the button group.
/// @param {Color} $item-selected-border-color [null] - The border color for a selected item from the button group.
/// @param {Color} $item-selected-hover-background [null] - The background color for a selected item in hover or focus state in the button group.
///
/// @param {border-radius} $border-radius [null] - The border radius used for button-group component.
///
/// @requires $default-palette
/// @requires $light-schema
/// @requires apply-palette
/// @requires extend
/// @requires text-contrast
/// @requires igx-elevation
/// @requires round-borders
/// @requires $elevations
///
/// @example scss Change the background, text, and border colors
///   $my-button-group-theme: igx-button-group-theme(
///     $item-text-color: white,
///     $item-background: rgba(0, 0, 0, .8),
///     $item-border-color: #dadada
///   );
///   // Pass the theme to the igx-button-group component mixin
///   @include igx-button-group($my-button-group-theme);
@function igx-button-group-theme(
    $palette: $default-palette,
    $schema: $light-schema,
    $elevations: $elevations,

    $shadow: null,
    $item-text-color: null,
    $item-background: null,
    $item-border-color: null,
    $item-disabled-border: null,
    $border-radius: null,

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

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

    $item-selected-text-color: null,
    $item-selected-background: null,
    $item-selected-border-color: null,
    $item-selected-hover-background: null
) {
    $name: 'igx-button-group';
    $button-group-schema: ();

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

    $theme: apply-palette($button-group-schema, $palette);

    $border: 1px solid map-get($theme, 'item-selected-border-color');

    $border-radius: round-borders(
        if($border-radius, $border-radius, map-get($button-group-schema, 'border-radius')), 0, 20px
    );

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

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

    @if not($item-selected-background) and $item-background {
        @if type_of($item-background) == 'color' {
            $item-selected-text-color: text-contrast($item-background);
        }
    }

    @if not($item-selected-text-color) and $item-selected-background {
        @if type_of($item-selected-background) == 'color' {
            $item-selected-text-color: text-contrast($item-selected-background);
        }
    }

    @if not($disabled-text-color) and $disabled-background-color {
        @if type_of($disabled-background-color) == 'color' {
            $disabled-text-color: rgba(text-contrast($item-background), .3);
        }
    }

    @if map-get($button-group-schema, 'elevation') > 0 {
        $border: none;
    }

    @if not($shadow) {
        $elevation: map-get($button-group-schema, 'elevation');
        $shadow: igx-elevation($elevations, $elevation);
    }

    @return extend($theme, (
        name: $name,
        palette: $palette,
        item-text-color: $item-text-color,
        item-background: $item-background,
        item-border-color: $item-border-color,
        item-disabled-border: $item-disabled-border,
        border-radius: $border-radius,
        item-hover-text-color: $item-hover-text-color,
        item-hover-background: $item-hover-background,
        disabled-text-color:$disabled-text-color,
        disabled-background-color:$disabled-background-color,
        item-selected-text-color: $item-selected-text-color,
        item-selected-background: $item-selected-background,
        item-selected-border-color: $item-selected-border-color,
        item-selected-hover-background: $item-selected-hover-background,
        border: $border,
        shadow: $shadow
    ));
}


/// @param {Map} $theme - The theme used to style the component.
/// @requires {mixin} igx-root-css-vars
/// @requires igx-color
/// @requires --var
@mixin igx-button-group($theme) {
    @include igx-root-css-vars($theme);
    $group-item-min-width: 24px;
    $group-item-border-thickness: 1px;
    $group-items-margin: rem(10px, 16px);
    $transition: all 140ms $ease-in-out-quad;
    $palette: map-get($theme, 'palette');

    $left: if-ltr(left, right);
    $right: if-ltr(right, left);

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

    %igx-group-item {
        @include ellipsis();
        border: $group-item-border-thickness solid --var($theme, 'item-border-color');
        color: --var($theme, 'item-text-color');
        background: --var($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;
        transition: $transition;

        &%igx-button--flat {
            border-radius: 0;
        }

        %igx-icon-display {
            color: currentColor;
        }

        &:not(:nth-child(0)) {
            margin-#{$left}: -1px;
        }

        &:first-of-type {
            border-top-#{$left}-radius: --var($theme, 'border-radius');
            border-bottom-#{$left}-radius: --var($theme, 'border-radius');
        }

        &:last-of-type {
            border-top-#{$right}-radius: --var($theme, 'border-radius');
            border-bottom-#{$right}-radius: --var($theme, 'border-radius');
        }

        &%igx-button--disabled {
            color: --var($theme, 'disabled-text-color') !important;
            background: --var($theme, 'disabled-background-color') !important;
            border-color: --var($theme, 'item-disabled-border');
        }

        &:hover,
        &:focus {
            %igx-icon-display {
                color: currentColor;
            }

            color: --var($theme, 'item-hover-text-color');
            background: --var($theme, 'item-hover-background');
            z-index: 1;
        }
    }

    %igx-group-item-vertical {
        &:not(:nth-child(0)) {
            margin-top: -1px;
            margin-#{$left}: 0;
        }

        &:first-of-type {
            border-top-#{$left}-radius: --var($theme, 'border-radius');
            border-top-#{$right}-radius: --var($theme, 'border-radius');
            border-bottom-#{$left}-radius: 0;
            border-bottom-#{$right}-radius: 0;
        }

        &:last-of-type {
            border-top-#{$left}-radius: 0;
            border-top-#{$right}-radius: 0;
            border-bottom-#{$left}-radius: --var($theme, 'border-radius');
            border-bottom-#{$right}-radius: --var($theme, 'border-radius');
        }
    }

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

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

        &%igx-button--disabled {
            position: relative;

            &::before {
                position: absolute;
                content: '';
                top: 0;
                #{$right}: 0;
                bottom: 0;
                #{$left}: 0;
                background: rgba(igx-color($palette, 'grays', 500), .06);
            }
        }
    }

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

    %igx-group-item-content {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        text-align: center;

        * ~ * {
            margin-#{$left}: $group-items-margin;
        }
    }
}