// Copyright (C) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
@import 'adaptivecards-vars';
@import 'swiper/swiper';
@import 'swiper/modules/pagination';
@import 'swiper/modules/navigation';

.swiper-pagination-bullet {
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #000;
}

.swiper-slide {
    &.swiper-slide-active.ac-carousel-page {
        visibility: visible;
    }

    &.ac-carousel-page {
        text-align: center;
        font-size: 18px;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;

        visibility: hidden;
    }
}

@mixin swiper-nav-button($content) {
    &::after {
        font-family: 'Segoe Fluent Icons';
        font-size: 14px;
        content: $content;
    }

    &:hover {
        background-color: rgba(0, 0, 0, 0.5);
        transition: background-color 700ms;

        &::after {
            color: white;
            transition: color 700ms;
        }
    }
}

.swiper-button-next.ac-carousel-right {
    @include swiper-nav-button("\EDDA");
}

.swiper-button-prev.ac-carousel-left {
    @include swiper-nav-button("\EDD9");
}

.swiper-button-next.ac-carousel-down {
	@include swiper-nav-button("\EDDC");
}

.swiper-button-prev.ac-carousel-up {
	@include swiper-nav-button("\EDDB");
}

.ac-carousel-right,
.swiper-rtl.ac-carousel-left {
    right: 0px;
} 

.ac-carousel-left,
.swiper-rtl.ac-carousel-right {
    left: 0px;
} 

.ac-carousel-up {
	top: 0px !important;
	right: 0px !important;
	left: auto !important;
	bottom: auto !important;
	margin: 0px !important;
}

.ac-carousel-down {
	bottom: 0px !important;
	right: 0px !important;
	left: auto !important;
	top: auto !important;
	margin: 0px !important;
}

.ac-carousel-pagination.swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 0px;
}

.ac-carousel-pagination.swiper-pagination.swiper-pagination-bullets.swiper-pagination-vertical {
    right: 0px;
}

.ac-container.ac-carousel-page-container {
    width: 100%;
}

.ac-carousel-container {
    position: relative;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
}

:root {
    --swiper-theme-color: #{$button-hl-bg-color};
    --swiper-pagination-bullet-size: 8px;
    --swiper-pagination-bullet-inactive-color: rgba(0, 0, 0, 0.2);
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-color: #007aff;
    --swiper-navigation-size: 44px;
}

@media(forced-colors: active) {
    .swiper-pagination-bullet {
        background-color: ButtonBorder;
    }
}