/* DARK MODE TOGGLE */
.dark-mode-toggle-item {
    padding: .5rem 15px 0px 15px;
    border-top: 1px solid var(--header-border-color);
}

.dark-mode-toggle .toggle-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.dark-mode-toggle .toggle-slot {
    position: relative;
    height: 39px;
    width: 78px;
    /* border: 3px solid #e4e7ec; */
    border-radius: 10em;
    /* background-color: white; */
    background-color: rgb(240 240 240);
    transition: background-color 250ms;
}

.dark-mode-toggle .toggle-checkbox:checked ~ .toggle-slot {
    /* background-color: #374151; */
    background-color: rgb(111, 111, 111);
}

.dark-mode-toggle .toggle-button {
    transform: translate(44px, -50%);
    top: 50%;
    position: absolute;
    height: 28px;
    width: 28px;
    border-radius: 50%;
    background-color: #ffeccf;
    box-shadow: inset 0px 0px 0px 3px #ffbb52;
    transition: background-color 250ms, border-color 250ms, transform 500ms cubic-bezier(.26,2,.46,.71);
}

.dark-mode-toggle .toggle-checkbox:checked ~ .toggle-slot .toggle-button {
    background-color: #485367;
    box-shadow: inset 0px 0px 0px 3px white;
    transform: translate(6px, -50%);
}

.dark-mode-toggle .sun-icon {
    position: absolute;
    height: 6em;
    width: 6em;
    color: #ffbb52;
}

.dark-mode-toggle .sun-icon-wrapper {
    position: absolute;
    height: 22px;
    width: 22px;
    opacity: 1;
    transform: translate(8px, -50%) rotate(25deg);
    top: 50%;
    transform-origin: 50% 50%;
    transition: opacity 150ms, transform 500ms cubic-bezier(.26,2,.46,.71);
    font-size: 22px;
    line-height: 22px;
    color: #ffbb52;
}

.dark-mode-toggle .toggle-checkbox:checked ~ .toggle-slot .sun-icon-wrapper {
    opacity: 0;
    transform: translate(18px, -50%) rotate(0);
}

.dark-mode-toggle .moon-icon {
    position: absolute;
    height: 6em;
    width: 6em;
    color: white;
}

.dark-mode-toggle .moon-icon-wrapper {
    position: absolute;
    height: 22px;
    width: 22px;
    opacity: 0;
    top: 50%;
    transform: translate(38px, -50%) rotate(0deg);
    transform-origin: 50% 50%;
    transition: opacity 150ms, transform 500ms
    cubic-bezier(.26,2.5,.46,.71);
    font-size: 22px;
    line-height: 22px;
}

.dark-mode-toggle .toggle-checkbox:checked ~ .toggle-slot .moon-icon-wrapper {
    opacity: 1;
    transform: translate(48px, -50%) rotate(-25deg);
    color: #fff;
}