/*dark/light mode */

.dark-light-toggle {
    display: flex;
    align-items: center;
    width: 50px;
    margin-left: 20px;
}

#htmlView .dark-light-toggle, #imageView .dark-light-toggle {
    margin-left: 0;
    margin-right: 20px;
    padding: 0;
    width: fit-content;
}

.dark-light-toggle .checkbox {
    opacity: 0;
    position: absolute;
}

.dark-light-toggle .label {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 45px;
    width: 50px;
    overflow: hidden;
    border-radius: var(--bs-border-radius-sm);
}

#htmlView .dark-light-toggle .label, #imageView .dark-light-toggle .label {
    border-radius: 0;
}

#htmlView .dark-light-toggle .label:hover, #imageView .dark-light-toggle .label:hover {
    background: var(--bs-gray-500);
}

.dark-light-toggle .label:hover {
    background: var(--bs-gray-300);
}

.dark-light-toggle .checkbox:not(:checked) + .label .icon-dark,
.dark-light-toggle .checkbox:checked + .label .icon-light {
    transform: translateY(1px);
    transition-delay: .1s;
    opacity: 1;
}

.dark-light-toggle .icon-dark, .dark-light-toggle .icon-light {
    position: absolute;
    width: 40px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(110%);
    transition-delay: 0ms;
    transition: transform 0.25s linear, opacity 0.25s linear;
    opacity: 0;
}

.dark-light-toggle .icon-dark {
    color: var(--bs-body-color);
}

#htmlView .dark-light-toggle .label:hover .icon-dark,
#imageView .dark-light-toggle .label:hover .icon-dark {
    color: #fff;
}

.dark-light-toggle .icon-light {
    color: #ffc107;
}

.dark-light-toggle svg {
    width: 18px;
    height: 18px;
}