@charset "UTF-8";
#toggle {
    display: none;
}

#toggle-btn label {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: var(--darkMode_animation);
}

.btn-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: var(--darkMode_animation);
}

svg.icon-nofill {
    width: var(--ui_btnSize);
    height: var(--ui_btnSize);
    stroke: var(--fontInfoColor);
    fill: none;
}

svg.icon {
    width: var(--ui_btnSize);
    height: var(--ui_btnSize);
    stroke: var(--fontInfoColor);
    fill: var(--fontInfoColor);
}

.icons {
    display: flex;
    align-items: center;
    gap: var(--ui_btnSize);
    transform: translateY(var(--ui_btnSize)) rotate(90deg);
    user-select: none;
    color: var(--mainColor_active);
    transition: var(--darkMode_animation);
    bottom: 0px;
    right: 0px;
    overflow-y: unset;
}

#toggle:checked ~ #toggle-btn {
    transition: var(--darkMode_animation);
}

#toggle:checked ~ #toggle-btn label .icons {
    transform: translateX(calc(-1 * var(--ui_btnSize)));
}

#toggle:hover ~ #toggle-btn label .icons .tofill,
.btn-icon:hover:not(:focus) svg .tofill {
    fill: var(--mainColor_inactive);
    stroke: var(--mainColor_inactive);
    opacity: 1;
}

#toggle:hover ~ #toggle-btn label .icons .tofill-inverse,
.btn-icon:hover:not(:focus) svg .tofill-inverse {
    fill: var(--bgColor);
    /* stroke: var(--bgColor); */
}

.btn-icon:focus {
    background: var(--mainColor_active);
}

.btn-icon:focus svg .tofill {
    fill: var(--bgColor);
    stroke: var(--bgColor);
}

#toggle:hover ~ #toggle-btn label,
.btn-icon:hover:not(:focus) {
    /* light mode */
    background: rgba(125, 125, 125, 0.1);
}

.btn-group {
    display: flex;
    flex-flow: column;
    gap: var(--ui_btnGap);
    position: fixed;
    bottom: calc(var(--ui_btnGap) + var(--ui_scrollBarWidth));
    right: calc(var(--ui_btnGap) + var(--ui_scrollBarWidth) + var(--ui_btnOffset));
    z-index: 1005;
}

.bookshelf-btn-group {
    display: flex;
    flex-flow: column;
    gap: var(--ui_btnGap);
    position: fixed;
    bottom: calc(var(--ui_btnGap) + var(--ui_scrollBarWidth));
    left: calc(var(--ui_btnGap) + var(--ui_scrollBarWidth) + var(--ui_btnOffset));
    z-index: 1005;
}