/* =============================================================
 * THS Scrollable Image Widget — CSS
 * ============================================================= */

/* Container */
.ths-scrollimg-wrap {
    position: relative;
}

.ths-scrollimg-container {
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.ths-scrollimg-container img {
    pointer-events: none; /* allow scroll through image */
}

.ths-scrollimg-container a {
    display: block;
    text-decoration: none;
}

.ths-scrollimg-container a img {
    pointer-events: auto;
}

/* ── Scrollbar: always ── */
.ths-scrollimg-sb-always::-webkit-scrollbar { width: 6px; }
.ths-scrollimg-sb-always::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.25);
    border-radius: 9999px;
}

/* ── Scrollbar: hover (hidden until hover) ── */
.ths-scrollimg-sb-hover::-webkit-scrollbar { width: 6px; }
.ths-scrollimg-sb-hover::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 9999px;
    transition: background 0.3s ease;
}
.ths-scrollimg-sb-hover:hover::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.25);
}

/* ── Scrollbar: hidden ── */
.ths-scrollimg-sb-hidden {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.ths-scrollimg-sb-hidden::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* ── Fade overlays (pseudo-elements) ── */
.ths-scrollimg-wrap {
    --ths-si-fade-size: 60px;
    --ths-si-fade-color: #ffffff;
}

.ths-scrollimg-fade-top::before,
.ths-scrollimg-fade-bottom::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: var(--ths-si-fade-size, 60px);
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
}

.ths-scrollimg-fade-top::before {
    top: 0;
    background: linear-gradient(to bottom, var(--ths-si-fade-color), transparent);
}

.ths-scrollimg-fade-bottom::after {
    bottom: 0;
    background: linear-gradient(to top, var(--ths-si-fade-color), transparent);
}