@import '../1-Helpers/variables';
@import '../1-Helpers/mixins';
@import '../2-Tools/transitions';

.slideshow {
    height: 100%;
    background-color: inherit;
    position: relative;
    
    .slides {
        position: relative;
        overflow: hidden;
        height: 100%;
        background-color: inherit;

        .slide {
            width: 100%;
            height: 100%;
            position: absolute;
            transition: $transition-mid-in-out;
            background-color: inherit;

            &.active {
                z-index: 1;
            }

            @include tablet-and-up {
                transition: $transition-slow-in-out;
            }
        }
    }

    .tabs {
        position: absolute;
        left: 50%;
        bottom: 10%;
        transform: translateX(-50%);
        z-index: 1;

        .tab {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: $slider-tab-inactive-color;
            position: relative;
            margin: 0 3px;
            opacity: .8;
            display: inline-block;
            cursor: pointer;
            transition: $transition-slow-in-out;

            &.active {
                background: none;
                border: 1px solid $slider-tab-active-color;
                transform: scale(1.4);
                margin: 0 5px;
                opacity: 1;

                &::after {
                    content: '';
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    background: $slider-tab-active-color;
                }
            }

            &:hover {
                opacity: 1;
            }
        }
    }

    .prev-btn, .next-btn {
        cursor: pointer;
    }
}