/* 
 * File: assets/css/modules/public-scroll-nav.css
 * Description: Horizontal Scroll Navigation Arrows (Left/Right)
 * Requirement: Visible only on screens >= 491px
 */

/* 預設隱藏 (Mobile First) */
.se-scroll-btn {
    display: none;
}

/* Desktop / Tablet (> 490px) */
@media (min-width: 491px) {
    .se-scroll-wrapper {
        position: relative;
        /* Ensure wrapper contains the absolute buttons */
    }

    .se-scroll-btn {
        display: flex;
        /* Flex to center icon */
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background-color: rgba(0, 0, 0, 0.25);
        /* 25% transparent black */
        border: none;
        border-radius: 50%;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        cursor: pointer;
        z-index: 10;
        transition: all 0.2s ease;
        opacity: 0.9;
        color: #ffffff;
        /* White text/icon */
        backdrop-filter: blur(2px);
    }

    .se-scroll-btn:hover {
        background-color: rgba(0, 0, 0, 0.5);
        /* Darker on hover */
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        opacity: 1;
        transform: translateY(-50%) scale(1.05);
        /* Slight zoom on hover */
    }

    .se-scroll-btn:active {
        transform: translateY(-50%) scale(0.95);
        /* Press effect */
    }

    /* Position Left/Right */
    .se-scroll-btn-left {
        left: 10px;
        /* Moved Inward */
    }

    .se-scroll-btn-right {
        right: 10px;
    }

    /* If container is grid or limiting overflow, adjust positions */
    /* Adjust for specific layouts if needed */

    /* Disabled State (Hidden) */
    .se-scroll-btn.hidden {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }

    /* Icon Styling (Chevron using CSS borders for lightweight) */
    .se-icon-chevron-left::before {
        content: '';
        display: block;
        width: 10px;
        height: 10px;
        border-top: 2px solid currentColor;
        border-left: 2px solid currentColor;
        transform: rotate(-45deg);
        margin-left: 4px;
        /* Center visual alignment */
    }

    .se-icon-chevron-right::before {
        content: '';
        display: block;
        width: 10px;
        height: 10px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        transform: rotate(45deg);
        margin-right: 4px;
        /* Center visual alignment */
    }
}