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

/// @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} $slide-background [null] - The slide background color.
/// @param {Color} $button-background [null] - The previous/next buttons idle background color.
/// @param {Color} $button-hover-background [null] - The previous/next buttons hover background color.
/// @param {Color} $button-disabled-background [null] - The previous/next buttons disabled background color.
/// @param {Color} $button-arrow-color [null] - The previous/next buttons idle arrow color.
/// @param {Color} $button-hover-arrow-color [null] - The previous/next buttons hover arrow color.
/// @param {Color} $button-disabled-arrow-color [null] - The previous/next buttons disabled arrow color.
/// @param {Color} $indicator-dot-color [null] - The active indicator dot color.
/// @param {Color} $indicator-border-color [null] - The idle indicator border color.
/// @param {Color} $indicator-active-border-color [null] - The active indicator border color.
/// @param {box-shadow} $button-shadow [null] - Shadow underneath the previous/next buttons.
///
/// @param {border-radius} $border-radius [null] - The border radius used for carousel component.
///
/// @requires $default-palette
/// @requires $light-schema
/// @requires apply-palette
/// @requires extend
/// @requires igx-elevation
/// @requires text-contrast
/// @requires $elevations
/// @requires round-borders
///
/// @example scss Change the previous/next button colors
///   $my-carousel-theme: igx-carousel-theme(
///     $button-background: black,
///     $button-hover-background: white
///   );
///   // Pass the carousel theme to the igx-carousel component mixin
///   @include igx-carousel($my-carousel-theme);
@function igx-carousel-theme(
    $palette: $default-palette,
    $schema: $light-schema,
    $elevations: $elevations,

    $border-radius: null,
    $button-shadow: null,

    $slide-background: null,

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

    $indicator-dot-color: null,
    $indicator-border-color: null,
    $indicator-active-border-color: null,
){
    $name: 'igx-carousel';
    $carousel-schema: ();

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

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

    $border-radius: round-borders(
        if($border-radius, $border-radius, map-get($carousel-schema, 'border-radius')),0 ,36px
    );

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

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

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

    @if not($button-disabled-arrow-color) and $button-disabled-background {
        $button-disabled-arrow-color: rgba(text-contrast($button-disabled-background), .3);
    }

    @return extend($theme, (
        name: $name,
        palette: $palette,

        slide-background: $slide-background,

        border-radius: $border-radius,
        button-shadow: $button-shadow,

        button-background: $button-background,
        button-disabled-background: $button-disabled-background,
        button-hover-background: $button-hover-background,
        button-arrow-color: $button-arrow-color,
        button-hover-arrow-color: $button-hover-arrow-color,
        button-disabled-arrow-color: $button-disabled-arrow-color,

        indicator-dot-color: $indicator-dot-color,
        indicator-border-color: $indicator-border-color,
        indicator-active-border-color: $indicator-active-border-color,
    ));
}

/// @param {Map} $theme - The theme used to style the component.
/// @requires {mixin} igx-root-css-vars
/// @requires igx-color
/// @requires igx-elevation
/// @requires $elevations
/// @requires {mixin} animation
/// @requires {mixin} scale-in-center
/// @requires {mixin} scale-out-center
/// @requires --var
@mixin igx-carousel($theme) {
    @include igx-root-css-vars($theme);

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

    @include scale-in-center();
    @include scale-out-center();

    $carousel-arrow-margin: 0 16px;
    $carousel-indicators-margin: 16px 0;
    $carousel-indicators-padding: 0;
    $carousel-indicator-margin: 0 5px;
    $indicator-border-style: 2px solid;

    %igx-carousel-display {
        display: flex;
        position: relative;
        justify-content: center;
        width: 100%;
        height: 100%;
        align-items: center;
        flex-flow: column nowrap;
    }

    %igx-nav-arrow {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 46px;
        height: 46px;
        cursor: pointer;
        border-radius: 50%;
        outline-style: none;
        transition: all .15s ease-in-out;
        color: --var($theme, 'button-arrow-color');
        background: --var($theme, 'button-background');
        box-shadow: --var($theme, 'button-shadow');
    }

    %igx-nav-arrow--disabled {
        background: --var($theme, 'button-disabled-background');
        color: --var($theme, 'button-disabled-arrow-color');
        pointer-events: none;
        box-shadow: none;

        igx-icon {
            color: currentColor;
        }
    }

    %igx-nav-arrow--hover {
        color: --var($theme, 'button-hover-arrow-color');
        background: --var($theme, 'button-hover-background');
    }

    %igx-carousel-arrow {
        margin: $carousel-arrow-margin;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        outline: none;
        user-select: none;
    }

    %igx-carousel-arrow--next {
        #{$right}: 0;
    }

    %igx-carousel-arrow--prev {
        #{$left}: 0;
    }

    %igx-carousel-arrow--next,
    %igx-carousel-arrow--prev {
        @include if-rtl() {
            igx-icon {
                transform: scaleX(-1);
            }
        }
    }

    %igx-carousel-indicators {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: $carousel-indicators-margin;
        padding: $carousel-indicators-padding;
        list-style: none;
        z-index: 10;
        #{$left}: 50%;

        @include if-ltr() {
            transform: translateX(-50%);
        }

        @include if-rtl() {
            transform: translateX(50%);
        }
    }

    %igx-carousel-indicators--bottom {
        bottom: 0;
    }

    %igx-carousel-indicators--top {
        top: 0;
    }

    %igx-carousel-indicators-label {
        align-items: center;
        // TODO: this should be wrapped in carousel typogrpahy
        font-size: rem(16px);
    }

    %igx-carousel-indicator {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: $carousel-indicator-margin;
        cursor: pointer;
    }

    %igx-nav-dot {
        position: relative;
        width: 12px;
        height: 12px;
        text-indent: -9999px;
        border: $indicator-border-style;
        border-color: --var($theme, 'indicator-border-color');
        border-radius: 50%;
        transition: all .15s $ease-out-quad;
        box-shadow: igx-elevation($elevations, 1);
        opacity: .7;

        &::after {
            @include animation('scale-out-center' .15s $ease-out-quad forwards);
            content: '';
            position: absolute;
            top: 1px;
            bottom: 1px;
            #{$left}: 1px;
            #{$right}: 1px;
            border-radius: inherit;
            background: --var($theme, 'indicator-dot-color');
            opacity: 0;
        }

        &:hover {
            opacity: 1;
        }
    }

    %igx-nav-dot--active {
        border: $indicator-border-style;
        border-color: --var($theme, 'indicator-active-border-color');
        opacity: 1;

        &::after {
            opacity: 1;
            @include animation('scale-in-center' .15s $ease-out-quad forwards);
        }
    }

    %igx-carousel-slide-wrapper {
        position: relative;
        width: 100%;
        height: inherit;
        overflow: hidden;
        outline-style: none;
        border-radius: --var($theme, 'border-radius');
    }

    %igx-carousel-slide {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background: --var($theme, 'slide-background');
        visibility: hidden;
    }

    %igx-carousel-slide--previous {
        z-index: 1;
        visibility: visible;
    }

    %igx-carousel-slide--current {
        z-index: 2;
        visibility: visible;
    }

    %igx-carousel-slide img {
        width: inherit;
        height: inherit;
        object-fit: cover;
        touch-action: none;
        pointer-events: none;
    }
}