// Frontend styles for kordit/section-slider.
//
// We override Swiper's default navigation / pagination chrome and
// replace it with a kordit-branded controls row that sits under the
// slider: pagination dots on the left, prev/next chevrons on the
// right. The .swiper-button-* / .swiper-pagination classes stay in
// the markup so Swiper can still wire them up — we just null out the
// default positioning/styling and apply ours on top.

.kordit-section--slider {
    .swiper {
        width: 100%;
        height: auto;
    }

    .swiper-slide {
        display: flex;
        align-items: stretch;
        height: auto;
    }

    // Controls row under the slider: pagination left, arrows right.
    .kordit-slider__controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-top: 2rem;
        padding: 0 0.5rem;

        &-left {
            display: flex;
            align-items: center;
            min-height: 44px;
        }

        &-right {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
    }

    // Neutralise Swiper's absolute-positioned button chrome so our own
    // layout (inside .kordit-slider__controls-right) takes over.
    .swiper-button-prev,
    .swiper-button-next {
        position: static !important;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        margin: 0;
        width: auto;
        height: auto;
        color: inherit;

        &::after,
        &::before {
            display: none !important;
            content: none !important;
        }
    }

    // Minimal ghost nav button — small, subtle, no hard border or
    // shadow. Just a thin chevron on a quiet background that fills in
    // with the accent color on hover.
    .kordit-slider__nav {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 50%;
        border: none;
        background: rgba(0, 0, 0, 0.06);
        color: var(--wp--preset--color--primary, #1a1a1a);
        cursor: pointer;
        transition:
            background 0.2s ease,
            color 0.2s ease;

        &:hover,
        &:focus-visible {
            background: var(--wp--preset--color--primary, #1a1a1a);
            color: #ffffff;
            outline: none;
        }

        // Swiper adds .swiper-button-disabled at the edges of a
        // non-loop carousel — dim it instead of hiding.
        &.swiper-button-disabled {
            opacity: 0.3;
            cursor: not-allowed;
            pointer-events: none;
        }

        svg {
            display: block;
        }
    }

    // Pagination container — override Swiper's absolute centering.
    .swiper-pagination {
        position: static;
        transform: none;
        width: auto;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    // Custom bullets — small dots that expand + color in on active.
    .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        margin: 0 !important;
        background: rgba(0, 0, 0, 0.25);
        opacity: 1;
        border-radius: 999px;
        transition: background 0.2s ease, width 0.2s ease;

        &-active {
            width: 28px;
            background: var(--wp--preset--color--accent, #0066ff);
        }
    }

    // Fraction / progressbar pagination — keep simple & themed.
    .swiper-pagination-fraction {
        font-size: 0.875rem;
        color: var(--wp--preset--color--secondary, #666);
    }

    .swiper-pagination-progressbar {
        position: relative;
        width: 120px;
        height: 3px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 999px;

        .swiper-pagination-progressbar-fill {
            background: var(--wp--preset--color--accent, #0066ff);
            border-radius: 999px;
        }
    }
}