@use '../../../../styles';

@layer components {
    .carousel-root {
        margin: 0 -20px 20px;
        max-width: 360px;
        overflow: hidden;
        padding: 0 20px;
    }

    .carousel.carousel-slider {
        height: 236px;
        overflow: visible;
        position: relative;

        .slider-wrapper {
            display: block;
            margin: 0 -4px;
            overflow: visible;
        }

        .slider {
            border-radius: unset;
            background: unset;
            display: flex;
            flex-wrap: nowrap;
            vertical-align: top;
            min-width: 100%;
            height: 188px;
            margin: 0;
            width: unset;

            &:after,
            &:before {
                display: none;
            }
        }

        .slide {
            box-sizing: border-box;
            display: block;
            flex-wrap: wrap;
            padding: 0 4px;
            margin: 0;
            width: 100%;
            max-width: 336px;
            min-width: 100% !important;

            > * {
                width: 100%;
            }
        }

        .control-arrow {
            @include styles.button-reset;
            font-size: 0;
            line-height: 0;
            position: absolute;
            z-index: 10;
            top: unset;
            left: unset;
            right: unset;
            bottom: 0;
            margin-top: -16px;
            width: 32px;
            height: 32px;
            min-height: 32px;
            opacity: unset;
            user-select: none;

            &::before {
                display: none;
            }

            &.control-disabled {
                cursor: not-allowed;
                opacity: 0.5;
                display: block;
            }
        }

        .control-next {
            right: 0;
        }

        .control-prev {
            right: 44px;
        }

        .control-dots {
            cursor: pointer;
            display: flex;
            align-items: center;
            flex-direction: row;
            column-gap: 6px;
            line-height: 0;
            margin-top: 24px;
            width: unset;
            position: absolute;
            bottom: 12px;

            .dot {
                background-color: rgba(255, 255, 255, 0.32);
                border: none;
                border-radius: 50%;
                height: 6px;
                width: 6px;
                padding: 0;
                font-size: 0.0001px;
                margin: 0;

                &.selected {
                    background-color: #fff;
                    height: 8px;
                    width: 8px;
                }
            }
        }
    }
}
