body {
    --hue: 270;
    --s-lim: 1.00;
    --l-lim: 1.00;

    --icon-theme: url('/img/icons/theme.svg');
    --icon-color: url('/img/icons/color.svg');
    --icon-lang: url('/img/icons/lang.svg');
    --icon-size: url('/img/icons/size.svg');
    --icon-content: url('/img/icons/content.svg');
    --icon-brief: url('/img/icons/brief.svg');
    --icon-article: url('/img/icons/article.svg');
    --icon-download: url('/img/icons/download.svg');
    --icon-upload: url('/img/icons/upload.svg');
    --icon-export: url('/img/icons/export.svg');
    --icon-yoha: url('/img/icons/yoha.svg');
}

.light {
    --color-button-color: hsl(var(--hue) 100 60);
    --drawer-icon-color: hsl(var(--hue) calc(var(--s-lim) * 80) calc(var(--l-lim) * 83));
    --icon-expand: url('/img/icons/light/expand.svg');
    --icon-goto: url('/img/icons/light/goto.svg');
}

.dark {
    --color-button-color: hsl(var(--hue) 72 50);
    --drawer-icon-color: hsl(var(--hue) calc(var(--s-lim) * 50) calc(var(--l-lim) * 30));
    --icon-expand: url('/img/icons/dark/expand.svg');
    --icon-goto: url('/img/icons/dark/goto.svg');
}

@font-face {
    font-family: 'RW Yohane Sans';
    src: url('/fonts/RWYohaneSans.otf');
}

.yoha,
.yoha * {
    font-family: 'RW Yohane Sans', 'Noto Sans CJK SC Light', 'Noto Sans SC Light', 'MiSans Light', sans-serif;
}

#drawer {
    position: fixed;
    display: block;
    width: 240pt;
    max-width: 80%;
    height: calc(100% - 2 * 12pt);
    top: 0;
    padding: 72pt 0 12pt 12pt;
    margin: 0;
    user-select: none;
    background-color: var(--drawer-bgcolor);
    z-index: 104;
}

#drawer #root_container div {
    background-color: var(--ind-button-bgcolor);
}

#drawer.collapse {
    left: calc(-12pt - min(240pt, 80%));
}

#drawer.expand {
    left: -12pt;
    box-shadow: 2pt 0 5pt hsl(var(--hue) calc(var(--s-lim) * 50) calc(var(--l-lim) * 40) / .4);
}

#drawer_button {
    position: fixed;
    display: block;
    width: calc(240pt + 12pt);
    max-width: calc(80% + 12pt);
    height: 48pt;
    top: 12pt;
    margin: 0;
    padding: 0;
    background-color: var(--db-bgcolor);
    box-shadow: 0 2pt 5pt hsl(var(--hue) calc(var(--s-lim) * 50) calc(var(--l-lim) * 40) / .4);
    overflow: hidden;

    z-index: 105;
}

#drawer_button .db_text {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 48pt;
    width: 48pt;
    float: right;
    font-size: 1.2em;
    font-weight: 700;
    user-select: none;
    word-break: break-all;
    color: var(--db-text-color);
}

#drawer_button.collapse .db_text {
    width: 40pt;
    letter-spacing: 2pt;
}

#drawer_button.expand .db_text {
    width: calc(min(240pt, 100%) - 2 * 48pt);
    letter-spacing: 8pt;
}

#drawer_button.collapse {
    left: calc(48pt - 12pt - min(240pt, 80%));
}

#drawer_button.expand {
    left: -12pt;
    box-shadow: -2pt 2pt 5pt hsl(var(--hue) calc(var(--s-lim) * 50) calc(var(--l-lim) * 40) / .4);
}

#drawer_button:hover,
#drawer_button:focus-visible {
    background-color: var(--db-hover-bgcolor);
}

#drawer_button.collapse:hover {
    left: calc(48pt + 48pt - 12pt - min(240pt, 80%));
}

#drawer_button:active {
    transform: translateY(2pt);
    background-color: var(--db-active-bgcolor);
}

#drawer_button svg.menu_icon {
    position: relative;
    float: right;
    height: 100%;
    overflow: hidden;
    fill: var(--db-text-color);
}

#drawer_button:hover svg.menu_icon {
    transform: translateX(-2pt);
    scale: 1.1;
}

#drawer_button.expand svg.menu_icon .top {
    animation: top-expand 0.5s ease forwards;
    transform-origin: center;
}

#drawer_button.collapse svg.menu_icon .top {
    animation: top-collapse 0.75s ease forwards;
    transform-origin: center;
}

#drawer_button.expand svg.menu_icon .mid {
    animation: mid-expand 0.5s ease forwards;
    transform-origin: center;
}

#drawer_button.collapse svg.menu_icon .mid {
    animation: mid-collapse 0.75s ease forwards;
    transform-origin: center;
}

#drawer_button.expand svg.menu_icon .low {
    animation: low-expand 0.5s ease forwards;
    transform-origin: center;
}

#drawer_button.collapse svg.menu_icon .low {
    animation: low-collapse 0.75s ease forwards;
    transform-origin: center;
}

#drawer_button.expand svg.menu_icon .xl {
    animation: xl-expand 0.5s ease forwards;
    transform-origin: center;
}

#drawer_button.collapse svg.menu_icon .xl {
    animation: xl-collapse 0.75s ease forwards;
    transform-origin: center;
}

#drawer_button.expand svg.menu_icon .xr {
    animation: xr-expand 0.5s ease forwards;
    transform-origin: center;
}

#drawer_button.collapse svg.menu_icon .xr {
    animation: xr-collapse 0.75s ease forwards;
    transform-origin: center;
}

#drawer .button {
    background-color: var(--ind-button-bgcolor);
}

#drawer .button:focus-visible,
#drawer .button:hover {
    background-color: var(--ind-button-hover-bgcolor);
}

#drawer .button:active {
    transform: translateY(2pt);
    background-color: var(--ind-button-active-bgcolor);
}

@keyframes top-expand {
    0% {
        transform: translateY(0);
        scale: 1;
    }

    50% {
        scale: 1;
    }

    51%,
    100% {
        transform: translateY(16px);
        scale: 0;
    }
}

@keyframes top-collapse {
    0%,
    65% {
        transform: translateY(16px);
        scale: 0;
    }

    66% {
        transform: translateY(16px);
        scale: 1;
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes mid-expand {
    0%,
    50% {
        scale: 1;
    }

    51%,
    100% {
        scale: 0;
    }
}

@keyframes mid-collapse {
    0%,
    65% {
        scale: 0;
    }

    66% {
        scale: 1;
    }

    100% {
    }
}

@keyframes low-expand {
    0% {
        transform: translateY(0);
        scale: 1;
    }

    50% {
        scale: 1;
    }

    51%,
    100% {
        transform: translateY(-16px);
        scale: 0;
    }
}

@keyframes low-collapse {
    0%,
    65% {
        transform: translateY(-16px);
        scale: 0;
    }

    66% {
        transform: translateY(-16px);
        scale: 1;
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes xl-expand {
    0%,
    49% {
        scale: 0;
    }

    50% {
        scale: 1;
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(225deg);
    }
}

@keyframes xl-collapse {
    0% {
        transform: rotate(-135deg);
    }

    33% {
        transform: rotate(-90deg);
    }

    66% {
        scale: 1;
    }

    67%,
    100% {
        transform: rotate(0deg);
        scale: 0;
    }
}

@keyframes xr-expand {
    0%,
    49% {
        scale: 0;
    }

    50% {
        scale: 1;
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(135deg);
    }
}

@keyframes xr-collapse {
    0% {
        transform: rotate(135deg);
    }

    33% {
        transform: rotate(90deg);
    }

    66% {
        scale: 1;
    }

    67%,
    100% {
        transform: rotate(0deg);
        scale: 0;
    }
}

#drawer_mask {
    position: fixed;
    display: block;
    border-radius: 0;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0;
    opacity: 25%;

    z-index: 101;
    background-color: hsl(0 0 0);
}

#drawer_mask.collapse {
    opacity: 0;
}

#drawer_mask.expand {
    opacity: 33%;
}

#drawer #root_container .drawer_root {
    margin: 0 6pt 12pt 6pt;
    height: fit-content;
    scroll-behavior: smooth;
    overflow-y: hidden;
}

#drawer #root_container .drawer_root.expand {
    padding: 0 0 12pt 0;
}

#drawer #root_container .drawer_root.collapse {
    padding: 0;
}

#drawer #root_container .drawer_root .drawer_content {
    --offset-x: 0pt;
    --offset-y: 0pt;
    display: flex;
    text-align: left;
    vertical-align: middle;
    align-items: center;
    height: fit-content;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

#drawer #root_container .drawer_root .drawer_content .drawer_icon {
    position: absolute;
    display: flow;
    left: -12pt;
    top: 6pt;
    width: 100%;
    height: 56pt;
    background-color: var(--drawer-icon-color);
    mask-image: var(--bg-path);
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--bg-path);
    -webkit-mask-repeat: no-repeat;
    z-index: 0;
}

#drawer #root_container .drawer_root .drawer_content * {
    z-index: 1;
}

#settings_theme {
    --bg-path: var(--icon-theme);
}

#settings_color {
    --bg-path: var(--icon-color);
}

#settings_lang {
    --bg-path: var(--icon-lang);
}

#settings_size {
    --bg-path: var(--icon-size);
}

#settings_yoha {
    --bg-path: var(--icon-yoha);
}

#drawer #root_container .drawer_root .drawer_content .opt_text {
    font-weight: 700;
    display: flex;
    float: left;
    align-items: center;
}

#drawer #root_container .drawer_root .drawer_content select {
    width: min(100pt, 50%);
    display: flex;
    float: right;
}

#drawer #root_container .drawer_root label.toggle {
    float: right;
}

#drawer #root_container .drawer_root h3 {
    margin: 0;
    padding: 12pt 0;
    text-indent: 1em;
}

#drawer #root_container {
    height: calc(100% - 80pt);
    background-color: transparent;
    padding: 0;
    margin: 0;
    box-shadow: none;
    overflow-y: auto;
}

#drawer #drawer_footer {
    background-color: var(--drawer-bgcolor);
    color: var(--fh-color);
    height: fit-content;
    text-align: center;
    font-size: 0.75em;
    padding: 3pt;
    border-radius: 0;
    border-top: 2pt double hsl(from var(--fh-color) h s l / .8);
    z-index: 105;
    position: relative;
    bottom: 0;
}

#drawer #root_container .drawer_root .drawer_container {
    background-color: transparent;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-shadow: none;
}

#drawer #root_container .drawer_root .drawer_container.expand {
    margin-top: 0;
}

#drawer #root_container .drawer_root .drawer_container.collapse {
    margin-top: calc(-1 * var(--height, 100%));
}

#drawer #root_container .drawer_root .drawer_container.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#drawer #root_container .drawer_root .drawer_container.flex .icon_expand {
    padding: 0 6pt;
    width: 24pt;
    height: 24pt;
    background-image: var(--icon-expand);
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
}

#drawer #root_container .drawer_root.expand .drawer_container.flex .icon_expand {
    transform: rotate(180deg);
}

#drawer #root_container .drawer_root #button_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
}

#drawer #root_container .drawer_root #color_button {
    height: 20pt;
    width: 20pt;
    background-color: var(--color-button-color);
    border: 1pt solid var(--button-shadow-color);
    margin-right: 3pt;
}

.icon_goto {
    background-image: var(--icon-goto);
}

#drawer .drawer_content .icon_goto {
    width: 16pt;
    height: 16pt;
    background-position: 50% 50%;
    background-size: 24pt;
    background-repeat: no-repeat;
}

label.toggle {
    --width: 45pt;
    --height: calc(var(--width) / 2.25);
    --subs: 2pt;

    position: relative;
    display: inline-flex;
    width: var(--width);
    height: var(--height);
    box-shadow: 0 1pt 2.5pt hsl(0 0 40 / .4);
    border-radius: var(--height);
}

label.toggle:focus .slider,
label.toggle input:hover ~ .slider,
label.toggle:hover .slider {
    box-shadow: 0 3pt 7.5pt hsl(var(--hue) calc(var(--s-lim) * 100) calc(var(--l-lim) * 70) / .4), inset 0 1pt 2pt hsl(0 0 0 / .4);
}

label.toggle input {
    display: none;
}

label.toggle .slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--height);
    background-color: var(--slider-bgcolor);
    box-shadow: 0 0 0 hsl(var(--hue) calc(var(--s-lim) * 100) calc(var(--l-lim) * 70) / .4), inset 0 1pt 2pt hsl(0 0 0 / .4);

}

label.toggle .slider .inner_slider {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    margin: var(--subs);
    width: calc(var(--height) - 2 * var(--subs));
    height: calc(var(--height) - 2 * var(--subs));
    border-radius: calc(var(--height) / 2 - var(--subs));
    background-color: var(--slider-inner-bgcolor);
    box-shadow: 0 1pt 3pt hsl(0 0 0 / .4);

}

label.toggle input:checked + .slider {
    background-color: var(--slider-active-bgcolor);
}

label.toggle:active .slider .inner_slider,
label.toggle input:active ~ .slider .inner_slider{
    background-color: var(--slider-inner-slcolor);
    top: 1pt;
}

label.toggle input:checked + .slider .inner_slider {
    transform: translateX(calc(var(--width) - var(--height)));
}

label.toggle #dn_span {
    background-image: url(/img/base/bg-slider.svg);
    background-size: cover;
    background-color: hsl(210 80 60);
    background-position: calc(var(--height) - var(--width));
    background-repeat: no-repeat;
}

label.toggle #dn_span .inner_slider {
    background-color: hsl(40 100 70);
    background-image: url(/img/base/moon-texture.svg);
    background-size: cover;
    background-position: 0 0;
    box-shadow: 1pt 1pt 2.5pt hsl(0 0 0 / .4), inset 0.6pt 0.6pt 0 hsl(0 0 100 / .6);
}

label.toggle #daynight:checked + #dn_span {
    background-color: hsl(var(--hue) calc(var(--s-lim) * 100) calc(var(--l-lim) * 20));
    background-position: 0;
}

label.toggle #daynight:checked + #dn_span .inner_slider {
    background-color: hsl(0 0 86);
    background-position: 0 96%;
}