html.light-theme {
    --switch-inner-bg-color: #ebebeb;
    --switch-outer-bg-color: #bab9b8;
    --switch-checked-inner-bg-color: #ebebeb;
    --switch-checked-outer-bg-color: #282828;
}
/* Dark theme colors */
html.dark-theme {
    --switch-inner-bg-color: var(--main-text-color);
    --switch-outer-bg-color: #4a4a4a;
    --switch-checked-inner-bg-color: var(--main-text-color);
    --switch-checked-outer-bg-color: #282828;
}

/* Styles for users who prefer dark mode at the OS level */
@media (prefers-color-scheme: dark) {
    /* defaults to dark theme */
    html.dark-theme {
        --switch-inner-bg-color: var(--main-text-color);
        --switch-outer-bg-color: #4a4a4a;
        --switch-checked-inner-bg-color: var(--main-text-color);
        --switch-checked-outer-bg-color: #282828;
    }
    /* Override dark mode with light mode styles if the user decides to swap */
    html.light-theme {
        --switch-inner-bg-color: #ebebeb;
        --switch-outer-bg-color: #bab9b8;
        --switch-checked-inner-bg-color: #ebebeb;
        --switch-checked-outer-bg-color: #282828;
    }
}

.switch-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
}
.switch-toggle + label {
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
}
input.switch-toggle-round-flat + label {
    padding: 2px;
    width: 48px;
    height: 24px;
    border-radius: 30px;
    transition: background 0.4s;
}
input.switch-toggle-round-flat + label:before,
input.switch-toggle-round-flat + label:after {
    display: block;
    position: absolute;
    content: "";
}
input.switch-toggle-round-flat + label:before {
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    background-color: var(--switch-outer-bg-color);
    border-radius: 30px;
    transition: background 0.4s;
}
input.switch-toggle-round-flat + label:after {
    top: 4px;
    left: 4px;
    bottom: 4px;
    width: 18px;
    background-color: var(--switch-inner-bg-color);
    border-radius: 22px;
    transition: margin 0.4s, background 0.4s;
}
input.switch-toggle-round-flat:checked + label:before {
    background-color: var(--switch-checked-outer-bg-color);
}
input.switch-toggle-round-flat:checked + label:after {
    margin-left: 22px;
    background-color: var(--switch-checked-inner-bg-color);
}

input.switch-toggle-round-flat:checked[disabled] + label:before {
    opacity: 0.7;
}
input.switch-toggle-round-flat:checked[disabled] + label:after {
    opacity: 0.2;
}

input.switch-toggle-round-flat[disabled] + label:before {
    opacity: 0.7;
}
input.switch-toggle-round-flat[disabled] + label:after {
    opacity: 0.2;
}

input.switch-toggle-round-flat[disabled] + label:hover {
    cursor: not-allowed;
}