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

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

    $indicator-border-style: rem(2px) solid;
    $btn-indent: rem(3px);

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

    %igx-carousel-display {
        --theme: #{$variant};
        --nav-btn-border-radius: #{var-get($theme, 'border-radius')};

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

    %igx-carousel-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        outline: none;
        user-select: none;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: unset;
        width: rem(46px);
        height: rem(46px);
        cursor: pointer;
        outline-style: none;
        transition: all .15s ease-in-out;
        background: var-get($theme, 'button-background');
        box-shadow: var-get($theme, 'button-elevation');
        border: rem(1px) solid var-get($theme, 'button-border-color');
        border-radius: var(--nav-btn-border-radius);

        igx-icon {
            --component-size: 1;
            color: var-get($theme, 'button-arrow-color');
        }

        @if $variant == 'indigo' {
            width: rem(28px);
            height: rem(28px);
            border-width: rem(2px);
            padding: initial;

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

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

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

        &[igxButton].igx-button--focused {
            background: var-get($theme, 'button-background');
            border: rem(2px) solid var-get($theme, 'button-focus-border-color');

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

            @if $variant == 'bootstrap' {
                box-shadow: 0 0 0 rem(4px) var-get($theme, 'button-focus-border-color');
                border-color: var-get($theme, 'button-border-color');
            }

            @if $variant == 'fluent' {
                border: none;

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

            @if $variant == 'indigo' {
                box-shadow: 0 0 0 rem(3px) var-get($theme, 'indicator-focus-color');
            }
        }

        &[igxButton].igx-button--disabled {
            background: var-get($theme, 'button-disabled-background');
            color: var-get($theme, 'button-disabled-arrow-color');
            border-color: var-get($theme, 'button-disabled-border-color');
            pointer-events: none;
            box-shadow: none;

            igx-icon {
                color: currentColor;
            }
        }
    }

    %igx-carousel-arrow--next {
        inset-inline-end: 0;
        margin-inline-end: rem(16px);

        @if $variant == 'indigo' {
            %igx-nav-arrow {
                &::after {
                    transform: rotate(-135deg);
                }
            }
        }
    }

    %igx-carousel-arrow--prev {
        inset-inline-start: 0;
        margin-inline-start: rem(16px);

        @if $variant == 'indigo' {
            %igx-nav-arrow {
                &::after {
                    transform: rotate(45deg);
                }
            }
        }
    }

    %igx-carousel-arrow--next,
    %igx-carousel-arrow--prev {
        [dir='rtl'] & {
            transform: scaleX(-1);
        }
    }

    %igx-carousel-indicators {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: rem(16px) 0;
        padding: pad-block(rem(4px)) pad-inline(rem(6px));
        gap: rem(8px);
        list-style: none;
        z-index: 10;
        inset-inline-start: 50%;
        transform: translateX(-50%);
        background: var-get($theme, 'indicator-background');
        box-shadow: var-get($theme, 'button-elevation');
        border-radius: var-get($theme, 'border-radius');

        [dir='rtl'] & {
            transform: translateX(50%);
        }

        @if $variant == 'indigo' {
            gap: rem(4px);
            padding: pad(rem(6px));
        }
    }

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

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

    %igx-carousel-indicators-label {
        align-items: center;
    }

    %igx-carousel-label-indicator {
        @include type-style('caption');

        margin: rem(16px) 0;
        min-width: rem(46px);
        box-shadow: none;
        border-radius: rem(4px);
        color: var-get($theme, 'indicator-color');
        background: var-get($theme, 'label-indicator-background');

        @if $variant == 'fluent' or $variant == 'indigo' {
            border-radius: rem(2px);
        }

        @if $variant == 'indigo' {
            padding: pad-block(rem(4px)) pad-inline(rem(6px));
            min-width: rem(28px);
        }
    }

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

        &:focus-visible {
            outline-style: none;
        }
    }

    %igx-nav-dot {
        position: relative;
        width: rem(12px);
        height: rem(12px);
        text-indent: rem(-9999px);

        @if $variant != 'indigo' {
            border: $indicator-border-style;
            border-color: var-get($theme, 'indicator-border-color');
        } @else {
            width: rem(16px);
            height: rem(16px);
        }

        border-radius: border-radius(50%);
        transition: all .15s $ease-out-quad;

        &::after {
            content: '';
            position: absolute;
            border-radius: inherit;
            background: var-get($theme, 'indicator-dot-color');

            @if $variant != 'indigo' {
                inset: rem(1px);
            } @else {
                width: rem(8px);
                height: rem(8px);
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }

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

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

            @if $variant == 'indigo' {
                &::before {
                    position: absolute;
                    content: '';
                    width: inherit;
                    height: inherit;
                    border: rem(2px) solid var-get($theme, 'indicator-hover-dot-color');
                    inset-inline-start: 0;
                    top: 0;
                    border-radius: border-radius(50%);
                }
            }
        }
    }

    %igx-nav-dot--active {
        @if $variant != 'indigo' {
            border: $indicator-border-style;
            border-color: var-get($theme, 'indicator-active-border-color');
        } @else {
            &::before {
                position: absolute;
                content: '';
                width: inherit;
                height: inherit;
                border: rem(2px) solid var-get($theme, 'indicator-active-border-color');
                inset-inline-start: 0;
                top: 0;
                border-radius: border-radius(50%);
            }
        }

        &::after {
            background: var-get($theme, 'indicator-active-dot-color');
            @if $variant != 'indigo' {
                @include animation('scale-in-center' .15s $ease-out-quad forwards);
            }
        }

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

            &::after {
                background: var-get($theme, 'indicator-active-hover-dot-color');
            }

            @if $variant == 'indigo' {
                &::before {
                    border-color: var-get($theme, 'indicator-active-hover-dot-color');
                }
            }
        }
    }

    %igx-carousel-indicators--focused {
        &::after {
            position: absolute;
            content: '';
            pointer-events: none;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            border: rem(2px) solid var-get($theme, 'indicator-focus-color');

            @if $variant == 'bootstrap' {
                border: none;
                box-shadow: 0 0 0 rem(4px) var-get($theme, 'button-focus-border-color');
            }

            @if $variant == 'fluent' {
                border: none;
                inset-block-start: $btn-indent;
                inset-inline-start: $btn-indent;
                width: calc(100% - (#{$btn-indent} * 2));
                height: calc(100% - (#{$btn-indent} * 2));
                box-shadow: 0 0 0 rem(1px) var-get($theme, 'button-focus-border-color');
                border-radius: 0;
            }

            @if $variant == 'indigo' {
                border: none;
                box-shadow: 0 0 0 rem(3px) var-get($theme, 'indicator-focus-color');
            }
        }

        %igx-nav-dot--active {
            border-color: var-get($theme, 'indicator-focus-color');

            &::after {
                background: var-get($theme, 'indicator-focus-color');
            }

            @if $variant == 'indigo' {
                border-color: var-get($theme, 'indicator-active-dot-color');
                box-shadow: 0 0 0 rem(3px) var-get($theme, 'indicator-focus-color');

                &::after {
                    background: var-get($theme, 'indicator-active-dot-color');
                }

                &:hover {
                    &::after {
                        background: var-get($theme, 'indicator-active-hover-dot-color');
                    }
                }
            }
        }
    }

    %igx-carousel-slide-wrapper {
        position: relative;
        width: 100%;
        height: inherit;
        overflow: hidden;
        outline-style: none;
        min-height: rem(240px);
        min-width: rem(300px);
    }

    %igx-carousel-slide {
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 0;
        z-index: -1;
        background: var-get($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;
    }

    %igx-carousel--vertical {
        %igx-carousel-arrow {
            inset-inline-start: unset;
            inset-block-start: unset;
            inset-inline-end: 0;
            margin-inline-end: rem(16px);
            transform: none;

            igx-icon {
                transform: rotate(90deg);
            }
        }


        %igx-carousel-arrow--prev {
            inset-block-start: 0;
            margin-block-start: rem(16px);
        }


        %igx-carousel-arrow--next {
            inset-block-end: 0;
            margin-block-end: rem(16px);
        }


        %igx-carousel-indicators {
            inset-inline-end: 0;
            inset-inline-start: unset;
            flex-direction: column;
            inset-block-start: 50%;
            transform: translateY(-50%);
            margin-block: 0;
            margin-inline-end: rem(29px);
            padding: pad-block(rem(6px)) pad-inline(rem(4px));
            bottom: unset;
        }

        %igx-carousel-label-indicator {
            margin-inline-end: rem(16px);
            padding: pad-block(rem(4px)) pad-inline(rem(6px));
        }

        %igx-carousel-indicators--start {
            inset-inline-end: unset;
            inset-inline-start: 0;
            margin-inline-start: rem(16px);
            margin-inline-end: unset;
        }

        @if $variant == 'indigo' {
            %igx-carousel-indicators {
                margin-inline-end: rem(16px);
                padding: pad(rem(6px));
            }


            %igx-carousel-label-indicator {
                padding: pad-block(rem(4px)) pad-inline(rem(6px));
                margin-inline-end: rem(16px);
            }

            %igx-carousel-indicators--start {
                margin-inline-start: rem(16px);
            }
        }
    }
}