/*------------------------------leftBar------------------------------*/
section.leftBar {
    position: absolute;
    top: calc(var(--topBarH) + 1.2rem);
    bottom: 1rem;
    left: 1rem;
    width: var(--leftBarW);
    background: var(--background);
    box-shadow: 0 0 0.6rem var(--shadow);
    display: flex;
    flex-flow: column;
    overflow: overlay;
}

section.leftBar button {
    position: relative;
    display: block;
    background: transparent;
    min-height: 8rem;
    border: none;
    transition: all var(--speed) ease;
}

button,
.button {
    font-size: 1.6rem;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
}

section.leftBar button span {
    position: relative;
    color: var(--color-leftBar);
    z-index: 3;
}

[disabled] {
    opacity: 0.3;
}

section.leftBar button::after {
    content: '';
    position: absolute;
    left: 0%;
    width: 0%;
    height: 100%;
    bottom: 0;
    z-index: 1;
    transition: all 0.3s ease;
}

section.leftBar button:hover::after {
    left: 0;
    //background: var(--color-content);
    background: linear-gradient(to right,
            var(--color-content) 0%, 
            var(--color-content) 8%, 
            transparent 8%, 
            transparent 100%);
    width: 100%;
}

section.leftBar button.button.click {
    //background-color: var(--color-content);
    background: linear-gradient(to right, 
            var(--color-content) 0%, 
            var(--color-content) 8%, 
            transparent 8%, 
            transparent 100%);
    width: 100%;
}

section.leftBar button.button.click span {
    color: var(--color-leftBarClick);
}
section.leftBar button.button span:hover {
    color: var(--color-leftBarClick);
}