.exsidenav__pop-nav {
    margin-bottom: var(--space-md)
}

.exsidenav__pop-link,
.exsidenav__link,
.exsidenav__control {
    display: flex;
    align-items: center;
    width: 100%;
    color: var(--color-contrast-high);
    text-decoration: none;
    line-height: 1;
    padding: var(--space-xxs);
    cursor: pointer;
    transition: 0.2s
}

.exsidenav__pop-link:hover,
.exsidenav__link:hover,
.exsidenav__control:hover {
    color: var(--color-primary)
}

/* popular links */
.exsidenav__pop-link .icon {
    --size: 16px;
    margin-right: var(--space-xxs);
    opacity: 0.5;
    transition: opacity 0.2s
}

.exsidenav__pop-link:hover .icon {
    opacity: 1
}

.exsidenav__pop-link[aria-current=page] {
    color: var(--color-primary);
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.15);
    border-radius: var(--radius-md)
}

.exsidenav__pop-link[aria-current=page] .icon {
    opacity: 1
}

/* main links */
.exsidenav__link {
    position: relative
}

.exsidenav__list .exsidenav__list .exsidenav__link::before {
    /* left mark */
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    height: 100%;
    width: 1px
}

.exsidenav__link[aria-current=page] {
    color: var(--color-primary)
}

.exsidenav__link[aria-current=page]::before {
    background-color: var(--color-primary)
}

/* list label */
.exsidenav__label-wrapper {
    margin: var(--space-md) 0 var(--space-xxs) var(--space-xxs)
}

.exsidenav__list .exsidenav__list .exsidenav__label-wrapper {
    margin: var(--space-xs) 0 var(--space-3xs) var(--space-xxs)
}

.exsidenav__label {
    color: var(--color-contrast-low);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em
}

/* button controlling sub navigations */
.exsidenav__control {
    font-weight: 500
}

.exsidenav__control,
.exsidenav__pop-link {
    font-size: var(--text-md, 1.125rem);
}

.exsidenav__control .icon {
    --size: 16px;
    display: block;
    margin-left: auto
}

.exsidenav__control .icon__group {
    will-change: transform;
    transform-origin: 8px 8px;
    transition: transform 0.3s var(--ease-out)
}

.exsidenav__control .icon__group>* {
    transform-origin: 8px 8px;
    stroke-dasharray: 17;
    transform: translateY(3px);
    transition: transform 0.3s, stroke-dashoffset 0.3s;
    transition-timing-function: var(--ease-out)
}

.exsidenav__control .icon__group>*:first-child {
    stroke-dashoffset: 10
}

.exsidenav__control .icon__group>*:last-child {
    stroke-dashoffset: 10
}

.exsidenav__control[aria-expanded=true]+.exsidenav__list {
    display: block
        /* show the subnavigation */
}

.exsidenav__control[aria-expanded=true]+.exsidenav__list>* {
    animation: exsidenav-entry-animation 0.4s var(--ease-out)
        /* animate list items */
}

.exsidenav__control[aria-expanded=true] .icon__group {
    transform: rotate(-90deg)
}

.exsidenav__control[aria-expanded=true] .icon__group>*:first-child,
.exsidenav__control[aria-expanded=true] .icon__group *:last-child {
    stroke-dashoffset: 0;
    transform: translateY(0px)
}

.exsidenav__list .exsidenav__list {
    display: none;
    border-left: 1px solid var(--color-contrast-lower);
    margin: var(--space-xxxs) 0 var(--space-sm) var(--space-xxs)
}

@keyframes exsidenav-entry-animation {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0px)
    }
}

@media (min-width: 64rem) {

    .exsidenav__pop-link,
    .exsidenav__link,
    .exsidenav__control {
        font-size: var(--text-sm)
    }
}