@property --custom-theme-block-content-slider-pos {
    initial-value: 0;
    inherits: true;
    syntax: '<number>';
}
.block-content-slider {
    --custom-theme-block-content-slider-deg-offset: 315deg;
    --custom-theme-block-content-slider-pos: 0;
    --custom-theme-block-content-slider-radius: 275px;
    --custom-theme-block-content-slider-outer-radius: 320px;

    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.content-slider__title {
    text-transform: uppercase;
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 700;
}
.content-slider__subtitle {
    color: var(--wp--preset--color--golden);
    font-size: 1.125rem;
    line-height: 1.3;
}
.content-slider__description {
    font-size: 1.125rem;
    line-height: 1.3;
}

.block-content-slider__arrows {
    margin-top: 40px;
}

@media screen and (min-width: 992px) {
    body:not(.wp-admin) .block-content-slider__contents {
        position: relative;
        border: 1px solid;
        border-radius: 50%;
        width: calc(var(--custom-theme-block-content-slider-radius) * 2);
        height: calc(var(--custom-theme-block-content-slider-radius) * 2);
    }

    body:not(.wp-admin) .block-content-slider__item {
        position: absolute;
        top: 50%;
        left: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        height: 80px;
        width: 190px;
        margin-left: -95px;
        margin-top: -40px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: --custom-theme-block-content-slider-pos 1s ease-in-out, opacity 1s ease-in-out;
        transform:
                translateX(calc(
                        var(--custom-theme-block-content-slider-outer-radius) * cos(var(--custom-theme-block-content-slider-deg-offset) + 360deg * var(--custom-theme-block-content-slider-pos))
                        + 95px * cos(var(--custom-theme-block-content-slider-deg-offset) + 360deg * var(--custom-theme-block-content-slider-pos))
                ))
                translateY(calc(
                        var(--custom-theme-block-content-slider-outer-radius) * sin(var(--custom-theme-block-content-slider-deg-offset) + 360deg * var(--custom-theme-block-content-slider-pos))
                        + 40px * sin(var(--custom-theme-block-content-slider-deg-offset) + 360deg * var(--custom-theme-block-content-slider-pos))
                ))
    ;
    }
    body:not(.wp-admin) .block-content-slider__item.is-active {
        opacity: 1;
        visibility: visible;
    }
    body:not(.wp-admin) .block-content-slider__item .content-slider__description,
    body:not(.wp-admin) .block-content-slider__item .content-slider__link {
        display: none;
    }
    body:not(.wp-admin) .block-content-slider__item--3,
    body:not(.wp-admin) .block-content-slider__item--4 {
        text-align: right;
    }
    .block-content-slider__dot {
        position: absolute;
        z-index: 10;
        top: 50%;
        left: 50%;
        width: 30px;
        height: 30px;
        margin-left: -15px;
        margin-top: -15px;
        border-radius: 50%;
        background-color: currentColor;
        --custom-theme-block-content-slider-pos-offset: 0;
        transition: --custom-theme-block-content-slider-pos 1s ease-in-out;
        transform:
                translateX(calc(var(--custom-theme-block-content-slider-radius) * cos(calc(var(--custom-theme-block-content-slider-deg-offset) + 360deg * (var(--custom-theme-block-content-slider-pos) + var(--custom-theme-block-content-slider-pos-offset))))))
                translateY(calc(var(--custom-theme-block-content-slider-radius) * sin(calc(var(--custom-theme-block-content-slider-deg-offset) + 360deg * (var(--custom-theme-block-content-slider-pos) + var(--custom-theme-block-content-slider-pos-offset))))))
    ;
    }
    .block-content-slider__dot--ref {
        color: var(--wp--preset--color--golden);
    }

    .block-content-slider__active-content {
        width: 100%;
        height: 100%;
    }
    .block-content-slider__item-content {
        position: absolute;
        left: 50%;
        top: 0;
        width: 70%;
        height: 100%;
        margin-left: -35%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 24px;
        transition: opacity 1s ease-in-out;
        opacity: 0;
        visibility: hidden;
        text-align: center;
    }
    .block-content-slider__item-content.is-active {
        opacity: 1;
        visibility: visible;
    }

    .content-slider__progress-indicator {
        display: none;
    }

}

@media screen and (max-width: 1279px) {
    .block-content-slider {
        --custom-theme-block-content-slider-radius: 245px;
        --custom-theme-block-content-slider-outer-radius: 290px;
    }
    .block-columns__columns:has(.block-content-slider) {
        flex-wrap: wrap;
        row-gap: 48px;
    }
    .block-columns__columns:has(.block-content-slider) > :first-child {
        --custom-theme-flex-span: 8;
    }
    .block-columns__columns > .block-column:has(.block-content-slider) {
        --custom-theme-flex-span: 12;
    }
    .block-content-slider__arrows {
        display: none;
    }
}

@media screen and (max-width: 991px) {
    .block-content-slider {
        --custom-theme-block-content-slider-progress: 0;
        margin-left: 0;
    }
    .block-content-slider__item {
        max-width: 450px;
    }
    .block-content-slider__contents {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .content-slider {
        position: relative;
        padding: 0 0 60px 40px;
    }

    .content-slider__progress-indicator {
        position: absolute;
        top: 0;
        left: 0;
        color: #E1E1DF;
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 20px;
        height: 100%;
    }
    .content-slider__progress-indicator::before {
        content: '';
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        border-radius: 50%;
        background: currentColor;
    }
    .content-slider__progress-indicator::after {
        content: '';
        border-left: 1px solid;
        flex: 1 1 100%;
    }
    .content-slider__progress-indicator--done {
        color: var(--wp--preset--color--blue);
        overflow: hidden;
        height: calc(var(--custom-theme-block-content-slider-progress) * 100%);
    }
    .block-content-slider__item:last-child {
        padding-bottom: 0;
    }
    .block-content-slider__item:last-child .content-slider__progress-indicator::after {
        display: none;
    }

    body.has-blue-background-color .content-slider__progress-indicator {
        color: #E1E1DF;
    }
    body.has-blue-background-color .content-slider__progress-indicator--done {
        color: var(--wp--preset--color--golden);
    }

    .content-slider__title {
        font-size: 1.5rem;
        color: var(--wp--preset--color--golden);
        margin-top: -5px;
    }
    .content-slider__subtitle {
        color: inherit;
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 24px;
    }
    .content-slider__description {
        margin-bottom: 24px;
    }
}
@media screen and (max-width: 767px) {
    .content-slider__progress-indicator {
        width: 16px;
        left: 10px;
    }
    .content-slider__progress-indicator::before {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
    }
}