.sam-stories {
    --story-item-size: 240px;
    --story-rotation-time: 3s;
    --theme-color: #f9e24b;
    --swiper-theme-color: var(--theme-color);
    --swiper-navigation-size: 76px;
    --swiper-navigation-sides-offset: 24px;
    --swiper-pagination-color: #fff;
    --swiper-pagination-bullet-inactive-color: #fff;
}
.sam-stories__modal {
    --theme-color: #f9e24b;
    --swiper-theme-color: var(--theme-color);
}

@property --bg-deg {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes rotate-bg {
    from {
        --bg-deg: 0deg;
    }

    to {
        --bg-deg: 360deg;
    }
}

/*  */
/* desktop slider */
/*  */
.sam-stories__slider {
    overflow: hidden;

    &:not(.swiper-initialized) {
        opacity: 0.66;
    }

    .swiper-wrapper {
        display: flex;
    }

    .sam-stories__slide.swiper-slide {
        width: auto;

        button {
            position: relative;
            background: none;
            border: none;
            margin: 0;
            padding: 10px;
            cursor: pointer;

            &:hover {
                opacity: 0.9;
                transition: opacity 0.2s ease;
            }

            &::before,
            &::after {
                content: '';
                position: absolute;
                inset: 0;
                border-radius: var(--story-item-size);
            }

            &::before {
                background: #fff;
                inset: 5px;
                z-index: 2;
            }

            &::after {
                background: conic-gradient(from var(--bg-deg),
                        oklch(from var(--theme-color) L C H),
                        oklch(from var(--theme-color) clamp(0, l + 0.2, 1) C H),
                        oklch(from var(--theme-color) L C H));
                animation: rotate-bg var(--story-rotation-time) infinite linear;
            }

            img,
            picture {
                position: relative;
                display: block;
                max-width: 100%;
                border: 0;
                aspect-ratio: 1 / 1;
                width: var(--story-item-size);
                overflow: hidden;
                object-fit: cover;
                object-position: center center;
                border-radius: var(--story-item-size);
                z-index: 3;
            }

            @media (width <=480px) {

                img,
                picture {
                    width: calc(var(--story-item-size) * 0.75);
                }

                &::before,
                &::after {
                    border-radius: calc(var(--story-item-size) * 0.75);
                }
            }
        }
    }

    .swiper-button-prev,
    .swiper-button-next {
        background: #fff;
        box-sizing: border-box;
        box-shadow: 0 0 2px 0px var(--theme-color);
        width: var(--swiper-navigation-size);
        padding: 12px;
        border-radius: 24px;
        transition: opacity 0.2s ease;

        &.swiper-button-disabled {
            opacity: 0;
        }

        &::after {
            font-size: calc(var(--swiper-navigation-size) / 2);
        }
    }

    .swiper-button-prev {
        padding-left: 8px;
    }

    .swiper-button-next {
        padding-right: 8px;
    }
}

/*  */
/* modal slider */
/*  */
.sam-stories__modal {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 0;
    height: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    opacity: 0;
    z-index: 2147483648;
    transition: opacity 0.2s ease, width 0.2s step-end, height 0.2s step-end;
    overflow: clip;

    &.opened {
        opacity: 1;
        width: 100%;
        height: 100%;
        transition: opacity 0.2s ease;
    }

    .sam-stories__close {
        position: absolute;
        top: 6px;
        right: 6px;
        background: none;
        border: none;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 20;
    }

    .sam-stories__modal-slider {
        margin: auto 0;
        height: 90dvh;
        width: 100%;

        .swiper-slide {
            display: flex;
            width: auto;

            picture,
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .swiper-button-next.sam-stories__modal-next,
    .swiper-button-prev.sam-stories__modal-prev {
        background: rgba(255, 255, 255, 0.3);
        color: #000;
        margin: 0;
        top: 0;
        left: 0;
        height: 100%;
        width: calc((100vw - 90vh / 16 * 9) / 2);
        opacity: 0;
    }

    .swiper-button-next.sam-stories__modal-next {
        left: auto;
        right: 0;
    }
}

/*  */
.sam-stories__item {
    position: relative;
    aspect-ratio: 9 / 16;
    height: 100%;
    width: auto;
    max-width: 100vw;
    margin: auto;
    border-radius: 5px;
    overflow: hidden;
    transform: scale(.75);
    transition: transform 0.4s ease;

    .swiper-slide-active & {
        transform: scale(1);
    }

    .sam-stories__item-slider {
        height: 100%;
        width: 100%;
    }

    picture,
    video {
        display: block;
        width: 100%;
        height: 100%;
        max-width: 100%;
        border: 0;
    }

    .swiper-progressbar {
        position: absolute;
        top: 8px;
        left: 8px;
        right: 8px;
        display: flex;
        gap: 2px;
        z-index: 20;

        span {
            position: relative;
            height: 2px;
            flex: 1 1 auto;
            background: #eee;

            &::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                max-width: 100%;
                background: var(--theme-color);
            }
        }

        &.active span:has(~ .active)::after {
            width: 100%;
        }
        &.active span.active::after {
            width: calc(100% * var(--progress));
        }
    }

    /*
    .swiper-progressbar.active span:has(~ .active)::after {
        width: 100%;
    }
    */
}

/* нижняя кнопка */
.sam-stories__btn {
    display: block;
    position: absolute;

    &.--top {
        top: 24px;
        left: 8px;
    }

    &.--bottom {
        bottom: 24px;
        left: 8px;
        right: 8px;
    }

    &.--left {
        text-align: left;
    }

    &.--center {
        text-align: center;
    }

    &.--right {
        text-align: right;
    }

    .sam-stories__link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 32px;
        padding: 0 16px;
        border-radius: 16px;
        background: #fcc521;
        color: #111;
        text-decoration: none;
        font-size: 14px;
        font-style: normal;
        line-height: 1.2;
        font-weight: 500;

    }
}


/* контролы */
.sam-stories__controls {
    position: absolute;
    top: 24px;
    right: 8px;
    max-width: calc(100% - 16px);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    opacity: 0;

    .swiper-slide-active .sam-stories__item & {
        opacity: 1;
    }

    svg {
        pointer-events: none;
    }
}

.sam-stories__playpause {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: #fff;
    border-radius: 40px;
    border: none;
    z-index: 2;

    &::after,
    &::before {
        position: absolute;
        content: "";
        display: block;
        height: 14px;
        width: 4px;
        border-radius: 8px;
        background: var(--black, #1f1f1f);
        transition: transform .2s ease;
    }

    &::before {
        left: 55%
    }

    &::after {
        right: 55%
    }

    & svg {
        transition: transform .2s ease;
        transform: scale(0)
    }

    &.paused svg {
        transform: scale(1)
    }

    &.paused::after,
    &.paused::before {
        transform: scale(0);
    }
}

.sam-stories__mute {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: #fff;
    border-radius: 40px;
    border: none;
    z-index: 2;

    &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 10%;
        margin-top: -1px;
        width: 80%;
        height: 1px;
        background: currentColor;
        transform: rotate(-45deg) scale(0);
        transition: transform 0.2s ease;
    }

    &.muted::after {
        transform: rotate(-45deg) scale(1);
    }
}