/* Scaled Toggle Switch from User Request */
.theme-toggle-wrapper {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 26px;
}

.theme-toggle-wrapper input {
    width: 0;
    height: 0;
    visibility: hidden;
    position: absolute;
}

.theme-toggle-label {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    background: #ebebeb;
    border-radius: 26px;
    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.4), inset 0px -2px 5px rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: 0.3s;
    overflow: hidden;
    /* Added to clip SVGs if needed */
}

/* Slider (Knob) */
.theme-toggle-label:after {
    content: "";
    width: 22px;
    height: 22px;
    position: absolute;
    top: 2px;
    left: 2px;
    background: linear-gradient(180deg, #ffcc89, #d8860b);
    border-radius: 50%;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    z-index: 10;
}

/* Checked State - Dark Mode */
.theme-toggle-wrapper input:checked+.theme-toggle-label {
    background: #242424;
}

.theme-toggle-wrapper input:checked+.theme-toggle-label:after {
    left: 58px;
    transform: translateX(-100%);
    background: linear-gradient(180deg, #777, #3a3a3a);
}

/* Icons */
.theme-toggle-label svg {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 5px;
    z-index: 9;
}

.theme-toggle-label svg.sun {
    left: 5px;
    fill: #fff;
    transition: 0.3s;
}

.theme-toggle-label svg.moon {
    left: 39px;
    /* Adjusted based on scale */
    fill: #7e7e7e;
    transition: 0.3s;
}

.theme-toggle-wrapper input:checked+.theme-toggle-label svg.sun {
    fill: #7e7e7e;
}

.theme-toggle-wrapper input:checked+.theme-toggle-label svg.moon {
    fill: #fff;
}

.theme-toggle-label:active:after {
    width: 28px;
}