#leftbar {
    position: fixed;
    background-color: var(--leftbar-color-background);
    top: var(--size-height-topbar);
    bottom: 0;
    left: calc(var(--size-width) * -1);
    width: var(--size-width);
    z-index: 10;
    color: var(--leftbar-color-text);
    font-size: 1rem;
    border-right: var(--leftbar-border-width) solid var(--leftbar-color-border);
    box-shadow: var(--leftbar-box-shadow);

    transition: left linear 0.25s;
}


body.leftbar-is-open #leftbar {
    left: 0;
}

body.leftbar-is-open #leftbar-wrapper {
    background-color: var(--leftbar-color-background) !important;
    color: var(--leftbar-color-text);
}

#leftbar a {
    color: inherit;
}

#leftbar a:hover,
#leftbar a:focus {
    color: inherit;
    text-decoration: underline;
}

body.leftbar-is-open #leftbar-toggle .panel-is-close, body:not(.leftbar-is-open) #leftbar-toggle .panel-is-open {
    display: none;
}

body #outer-container {
    transition: padding-left linear 0.25s;
}
body.leftbar-is-open #outer-container {
    padding-left: var(--size-width-leftbar);
}