/* H3X Sliding Buttons / Image / Dots — shared styles. */

/* ---- Sliding Buttons carousel (frontend) ----------------------------- */
.h3x-sliding-buttons:not(.is-editor) .h3x-sliding-buttons__viewport {
    overflow: hidden;
    max-width: 100%;
}

.h3x-sliding-buttons:not(.is-editor) .h3x-sliding-buttons__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    transition: transform 0.4s ease;
    will-change: transform;
}

/* Each button is sized to its own image; padding (block control) grows it.
   Background is set inline by JS (white = unselected, configured = selected). */
.h3x-sliding-buttons:not(.is-editor) .h3x-sliding-button {
    flex: 0 0 auto;
    box-sizing: border-box;
    margin: 0;
    border: 0;
    background: #ffffff;
    cursor: pointer;
    line-height: 0;
    -webkit-appearance: none;
    appearance: none;
}

.h3x-sliding-button img {
    display: block;
    height: auto;
    max-width: none;
}

/* ---- Sliding Image — one slide shown at a time (frontend) ------------- */
.h3x-sliding-image:not(.is-editor) .h3x-sliding-image-slide {
    display: none;
    margin: 0;
}

.h3x-sliding-image:not(.is-editor) .h3x-sliding-image-slide.is-active {
    display: block;
    animation: h3x-sliding-fade 0.4s ease;
}

@keyframes h3x-sliding-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.h3x-sliding-image-slide img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Horizontal alignment of the slide images within the Sliding Image block.
   A flex column is what makes alignment actually apply to the figures —
   the parent column's justify/align settings can't reach them otherwise. */
.h3x-sliding-image__slides {
    display: flex;
    flex-direction: column;
}

.h3x-sliding-image.is-content-left .h3x-sliding-image__slides {
    align-items: flex-start;
}

.h3x-sliding-image.is-content-center .h3x-sliding-image__slides {
    align-items: center;
}

.h3x-sliding-image.is-content-right .h3x-sliding-image__slides {
    align-items: flex-end;
}

/* ---- Sliding Image Dots (frontend) ----------------------------------- */
.h3x-sliding-dots__row {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.h3x-sliding-dots__row.is-horizontal {
    flex-direction: row;
    align-items: center;
}

.h3x-sliding-dots__row.is-vertical {
    flex-direction: column;
    align-items: flex-start;
}

.h3x-sliding-dots__dot {
    width: 14px;
    height: 14px;
    padding: 0;
    border: 2px solid #111111; /* overridden inline by JS */
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

/* ---- Editor previews ------------------------------------------------- */
.h3x-sliding__note {
    margin: 0 0 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-style: italic;
    opacity: 0.7;
    border: 1px dashed currentColor;
    border-radius: 4px;
}

.h3x-sliding-buttons.is-editor .h3x-sliding-buttons__track {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

.h3x-sliding-button.is-editor,
.h3x-sliding-image-slide.is-editor {
    display: block;
}

.h3x-sliding-button.is-editor img,
.h3x-sliding-image-slide.is-editor img {
    display: block;
    height: auto;
}

.h3x-sliding__pick {
    margin: 8px 0;
}

.h3x-sliding-image.is-editor .h3x-sliding-image__slides > * + * {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba( 0, 0, 0, 0.15 );
}

.h3x-sliding-dots.is-editor .h3x-sliding-dots__row {
    display: flex;
    gap: 10px;
}

.h3x-sliding-dots.is-editor .h3x-sliding-dots__row.is-vertical {
    flex-direction: column;
}

.h3x-sliding-dots.is-editor .h3x-sliding-dots__dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #111111;
    border-radius: 50%;
}