/* Shiny slider line */
.irs--shiny .irs-line {
    background: rgb(var(--primary)) !important;
}

/* Shiny slider bar */
.irs--shiny .irs-bar {
    background: rgb(var(--orange), 0.75) !important;
    border: none !important;
}

/* Shiny circle handle */
.irs--shiny .irs-handle {
    background: rgb(var(--orange)) !important;
}

/* Shiny value indicator */
.irs--shiny .irs-single {
    top: -6px !important;
    background: rgb(var(--orange)) !important;
    color: rgb(var(--txt-offwhite)) !important;
    font-size: var(--unit-s) !important;
    border: none !important;
}

/* Shiny value indicator shade */
.irs.irs--shiny .irs-handle:active {
    box-shadow: 0 0 5px 2px rgb(var(--orange), 0.5) !important;
}

/* Shiny min/max text */
.irs--shiny .irs-min,
.irs--shiny .irs-max {
    color: rgb(var(--secondary)) !important;
    font-size: var(--unit-s) !important;
}

/* Override Bootstrap action button indentation */
.action-button:not(.action-link) .action-icon+.action-label {
    padding-left: 0 !important;
}

/* Switch area - Deep research */
.switch {
    /* Override browser default styles */
    appearance: none;
    -webkit-appearance: none;

    /* Switch area size */
    width: 2.25rem;
    height: 1.25rem;
    border-radius: 0.625rem; 


    background: rgb(var(--secondary));
    cursor: pointer;
    position: relative;
    transition: background 0.2s;
}

/* Switch circle button */
.switch::before {
    content: "";
    position: absolute;
    background: rgb(var(--deepdark));

    /* Circle size */
    width: 0.96rem;
    height: 0.96rem;
    border-radius: 50%;

    /* Circle position */
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    transition: transform 0.2s;
}

/* Switch checked state */
.switch:checked {
    background: rgb(var(--secondary));
}
.switch:checked::before {
    background: rgb(var(--orange));
    left: calc(2.25rem - 0.97rem - 3px);
    transform: translateY(-50%);
}