.at-carousel.--hasBackground:has(.at-carousel__navigationWrapper) {
    padding-bottom: calc(var(--articlePadding) - 44px - var(--marginMedium)) !important;
}

.at-carousel {
    max-width: 100vw;
    /** Override Swiper variables */
    --swiper-pagination-color: var(--baseDark300);
    --swiper-pagination-bullet-inactive-color: var(--baseDark300);
}

.at-carousel.--light {
    /** Override Swiper variables */
    --swiper-pagination-color: var(--baseLight200);
    --swiper-pagination-bullet-inactive-color: var(--baseLight100);
    --swiper-pagination-bullet-active-color: var(--baseLight100);
}

/**
 * Make all slides the same height
 */

.at-carousel .swiper-slide {
    height: auto;
}

.at-carousel .swiper-slide .Article {
    height: 100%;
    margin-block: 0;
}

.at-carousel .swiper-slide .Article.--hasBackground {
    padding-block: calc(var(--articlePadding) / 2);
}

.at-carousel .swiper-slide {
    border-radius: var(--borderRadiusSmall);
}

/**
 * Controls
 */

.at-carousel__navigationWrapper {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    margin-block: var(--marginMedium) 10px;
}

.at-carousel .u-buttonWrapper:has(.swiper-button-disabled + .swiper-button-disabled) {
    display: none;
}

.at-carousel {
    & .swiper-pagination {
        top: unset;
        bottom: unset;
    }

    & .swiper-pagination-bullet {
        border-radius: var(--borderRadiusSmall);
        transition: width 0.3s ease-in-out;
    }

    & .swiper-pagination-bullet-active {
        width: var(--marginMedium);
    }

    & .swiper-css-mode > .swiper-wrapper {
        overflow: clip;
    }

    & .swiper-button-next,
    & .swiper-button-prev {
        position: static;
        margin-top: 0;
        display: flex;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 4px;
        font-family: var(--iconFont);
        background: var(--baseLight100);
        border: none;
        border-radius: 50%;
        box-shadow: 0 3px 8px -4px rgba(0,0,0,0.3);
    }

    & .swiper-button-next {
        right: 0;
    }

    & .swiper-button-prev {
        left: 0;
    }
}

.at-carousel {
    & .swiper-button-next::after,
    & .swiper-button-prev::after {
        font-family: var(--iconFont);
        font-size: 1.6rem;
        place-self: center;
        color: var(--baseDark900);
    }

    & .swiper-button-next::after {
        content: '\e802';
    }

    & .swiper-button-prev::after {
        content: '\e801';
    }
}