@use '../variables';

nw-carousel {
    .carousel-container {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 100%;
    }
    .carousel-content {
        position: relative;
        width: 100%;
        min-width: 0;
    }
    .carousel {
        position: relative;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
    }
    .pagination-container {
        flex: 1;
    }
    .page-indicators {
        width: 100%;
        text-align: center;

        .page-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin: 0 4px;
            display: inline-block;
            background-color: variables.get-color('gray', 4x-light);

            &.active {
                background-color: variables.get-color('primary', base);
            }
            &:hover {
                background-color: #ffffff;
            }
        }
    }
    .pagination-masks {
        width: 100%;
        position: absolute;
        height: 100%;
        z-index: 1;
        pointer-events: none;

        .pagination-mask {
            position: absolute;
            width: 100%;
            height: 100%;

            &.pagination-mask-start {
                left: 0;
            }
            &.pagination-mask-end {
                right: 0;
                transform: rotate(180deg);
            }
        }
    }

    .collapse-expand-grid-container {
        position: absolute;
        bottom: 0;
        top: 0;
        width: 100px;
        overflow: hidden;
    }

    .collapse-expand-container-start {
        left: 0;
    }

    .collapse-expand-container-end {
        right: 0;
    }

    .collapse-animation {
        animation: collapse 300ms linear forwards;
    }

    @keyframes collapse {
        from {
            width: 100px;
        }
        to {
            width: 0;
        }
    }
}