/* assets/css/sliders.css */

/* General Switcher Styles */
.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:checked + .slider:before {
    transform: translateX(14px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Container for search bar and switcher list */
.switcher-list-container {
    display: block;
    max-width: 100%;
}

/* Style for search box */
#page-search {
    margin-bottom: 10px;
    padding: 5px;
    width: 20%; /* Reduce the size of the search bar */
    box-sizing: border-box;
}

/* Wrapper to enable horizontal scrolling */
.switcher-list-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

/* Grid layout for switcher items */
.switcher-list {
    display: grid;
    grid-template-rows: repeat(4, 70px); /* 4 rows with fixed height */
    grid-auto-flow: column; /* Fill columns before rows */
    gap: 10px;
    justify-items: start; /* Align items to the start of each column */
    justify-content: left;
    width: auto;
}

.switcher-item {
    width: 200px; /* Increased width for each switcher item */
    display: flex;
    align-items: center;
    justify-content: left; /* Align content to the left */
    padding: 10px;
    box-sizing: border-box;
    text-align: left; /* Left align text */
    overflow: hidden; /* Handle text overflow */
    text-overflow: ellipsis; /* Add ellipsis for overflowed text */
    white-space: nowrap; /* Prevent text wrapping */
    border: 1px solid #ddd; /* Optional: Add border for better visualization */
    height: 70px; /* Ensure uniform height for items */
    gap: 10px; /* Add gap between elements */
}

/* Text within the switcher item */
.switcher-item span {
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
}