.left-nav {
    padding: 10px 20px;
    width: 289px;
    overflow-y: auto;
    top: calc(var(--header-height) + var(--promotion-bar-height));
    height: calc(100vh - var(--header-height) - var(--promotion-bar-height));
    font-family: 'Open Sans';
    padding-top: var(--padding-top);
    background-color: var(--body-background);

    li {
        list-style: none;
    }    
    a, button {
        text-decoration: none;
        color: #757575;
        font-size: 16px;
        display: inline-flex;
        width: 100%;
        margin: 2px 0;
        padding: 0.25em 0.375em;
        background: none;
        border: none;
        cursor: pointer;
        font: inherit;
        text-align: left;

        &.active, &:hover {
            color: var(--link-color);
        }
    }

	*:focus {
	   	 outline: none;
	}

    .nav-group {
        margin-left: 6px;
        font-size: 14px;
    }

    nav {
        border-left: 2px solid #dddddd;
//        margin-top: 5px;
        margin-bottom: 5px;

        &.collapsed {
            display: none;
        }
    }

    nav > li > a, nav > li > button {
        padding-left: 20px;
        text-align: left;

        &.active {
            border-left: var(--orange-line-thickness) solid var(--active-color);
            padding-left: calc(20px - var(--orange-line-thickness));
        }
    }

    nav.sub_pages {
        border: none;
    }

	nav.sub_pages a, nav.sub_pages button {
        padding-left: 32px;

        &.active {
            padding-left: calc(32px - var(--orange-line-thickness));
        }
	}

    .parent {
        color: #393939;
    }

    .state-indicator {
        margin-left: auto;
        margin-top: 5px;
        width: 6.2px;
        height: 10px;
        flex: 0 0 auto;
        transition: transform 0.1s;
        filter: invert(49%) sepia(4%) saturate(5%) hue-rotate(23deg) brightness(92%) contrast(90%);
    }

    button:hover .state-indicator,
    button.current .state-indicator {
        filter: invert(47%) sepia(61%) saturate(1950%) hue-rotate(345deg) brightness(100%) contrast(95%);
    }

    button.expanded .state-indicator {
        transform: rotate(90deg);
    }
}