/* =============================================
   GlideKit Horizontal Scrollbar Styles
   ============================================= */

/* Base Styles */
.glidekit-scrollbar-wrapper {
    width: 100%;
    display: flex;
}

/* Default "Inline" Positioning */
.glidekit-inner-wrapper {
    display: flex;
    align-items: center;
}

.scroll-track {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.scroll-thumb {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: grab;
    pointer-events: auto;
    transition: background-color 0.2s ease, transform 0.2s ease, height 0.2s ease, width 0.2s ease;
}

/* Only apply hover scale if not disabled */
.scroll-thumb:not(.no-hover-scale):hover {
    transform: translateY(-50%) scale(1.1);
}

/* When hover scale is disabled */
.scroll-thumb.no-hover-scale:hover {
    transform: translateY(-50%);
}

/* Absolute Positioning Styles */
.glidekit-arrows-position-absolute .glidekit-inner-wrapper {
    position: static;
}

.glidekit-arrows-position-absolute .glidekit-arrow {
    position: absolute;
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
}

.glidekit-arrows-position-absolute .glidekit-arrow-prev {
    left: 0;
}

.glidekit-arrows-position-absolute .glidekit-arrow-next {
    right: 0;
}

.glidekit-arrows-position-absolute .scroll-track {
    margin: 0 auto;
}

/* Hide native scrollbars - Horizontal */
.glidekit-hide-native-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.glidekit-hide-native-scrollbar::-webkit-scrollbar {
    display: none;
}

/* =============================================
   GlideKit Vertical Scrollbar Styles
   ============================================= */

/* Base Styles */
.glidekit-vertical-scrollbar-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Default "Inline" Positioning */
.glidekit-inner-wrapper-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.scroll-track-vertical {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
}

.scroll-thumb-vertical {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    cursor: grab;
    pointer-events: auto;
    transition: background-color 0.2s ease, transform 0.2s ease, height 0.2s ease, width 0.2s ease;
}

/* Only apply hover scale if not disabled */
.scroll-thumb-vertical:not(.no-hover-scale):hover {
    transform: translateX(-50%) scale(1.1);
}

/* When hover scale is disabled */
.scroll-thumb-vertical.no-hover-scale:hover {
    transform: translateX(-50%);
}

/* Vertical Absolute Positioning Styles */
.glidekit-arrows-position-absolute .glidekit-inner-wrapper-vertical {
    position: static;
}

.glidekit-arrows-position-absolute .glidekit-vertical-scrollbar-wrapper .glidekit-arrow {
    position: absolute;
    z-index: 10;
    left: 50%;
    transform: translateX(-50%);
}

.glidekit-arrows-position-absolute .glidekit-vertical-scrollbar-wrapper .glidekit-arrow-prev {
    top: 0;
}

.glidekit-arrows-position-absolute .glidekit-vertical-scrollbar-wrapper .glidekit-arrow-next {
    bottom: 0;
    top: auto;
}

.glidekit-arrows-position-absolute .scroll-track-vertical {
    margin: auto 0;
}

/* Hide native scrollbars - Vertical */
.glidekit-hide-native-scrollbar-vertical {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.glidekit-hide-native-scrollbar-vertical::-webkit-scrollbar {
    display: none;
}

/* =============================================
   Shared Styles
   ============================================= */

/* Arrow Base Styles */
.glidekit-arrow {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    line-height: 1;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Dragging Helper Classes */
.active-dragging {
    cursor: grabbing !important;
    user-select: none;
    -webkit-user-select: none;
}

.active-dragging * {
    user-select: none;
    -webkit-user-select: none;
}

.active-dragging img {
    pointer-events: none;
    -webkit-user-drag: none;
}