/* Modular sheets are linked from HTML (not @import) so the parser can
   fetch them in parallel instead of a white-screen waterfall. */

/* Split Button styles */
.split-button-container {
    display: flex;
    overflow: hidden;
    border-radius: 4px;
    width: 100%;
}

/* Default state: Left button takes full width, right is hidden */
.split-left {
    border-top-right-radius: 4px;
    /* Rounded on all sides by default */
    border-bottom-right-radius: 4px;
    border-right: none;
    flex: 1;
    white-space: nowrap;
    text-align: center;
    transition: all 0.3s ease;
}

.split-right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid #ccc;
    background-color: #fff5f5;
    /* Light red for reset button */
    flex: 0;
    /* Start with no space */
    width: 0;
    /* Start with no width */
    padding: 0;
    /* Start with no padding */
    opacity: 0;
    /* Start invisible */
    text-align: center;
    display: none;
    /* Initially hidden */
    transition: all 0.3s ease;
    overflow: hidden;
    /* Hide text while collapsed */
}

/* When filters are active: both buttons take equal space */
.split-left.active {
    border-top-right-radius: 0;
    /* Remove right side rounding */
    border-bottom-right-radius: 0;
    background-color: #e8f4ff;
    border-color: #0066cc;
    flex: 1;
    /* Equal flex with split-right */
}

/* When right button is visible */
.split-right[style*="display: block"] {
    flex: 1;
    /* Equal flex with active split-left */
    width: auto;
    /* Let width be determined by flex */
    padding: 0.75rem 1.5rem;
    /* Restore padding */
    opacity: 1;
    /* Make visible */
}