aside {
    padding: 9pt;
    padding-inline-end: 3pt;
    margin: 5pt -9pt -9pt;
}

aside a {
    margin-block-end: 4px;
}

aside > ul > li > *:first-child {
    margin-block-end: 9pt;
}

aside ul {
    list-style: none;
    padding-inline-start: 12pt;
    transition: ease .2s all;
}
aside > ul {
    padding-inline-start: 0 !important;
}

aside li > *:first-child {
    display: block;
    padding: 2pt 12pt 2pt 6pt;
    border-radius: 6px;
}

aside li {
    position: relative;
}

aside li.open > *:first-child {
    background: #eff0f3;
}

aside li > button.open {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    width: 18pt;
    height: 18pt;
    padding: 3pt;
    border-radius: 4pt;
    background-color: #eff0f3;
}
aside li > button.open::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
    color: #19181f;
}
@media (hover: hover) {
    aside li > button.open {
        opacity: 0;
    }
}
aside li:hover > button.open, aside li.open > button.open, aside li:focus-visible > button.open, aside li > button.open:focus-visible {
    opacity: 1;
}
aside li.open > button.open {
    background: #eff0f3;
    transform: rotate(90deg);
}
aside li > button.open:hover {
    background: #e4e5ea;
}

aside li > ul {
    visibility: hidden;
    max-height: 0;
    opacity: 0;
}
aside li.open > ul {
    visibility: visible;
    max-height: none;
    opacity: 1;
}

aside li.current > *:first-child {
    color: #11566c;
    font-weight: 600;
}
aside li.current > *:first-child::after {
    content: "";
    position: absolute;
    width: 3pt;
    height: 3pt;
    border-radius: 50%;
    background: #11566c;
    right: 8pt;
    top: 9pt;
    margin-block: auto;
}

aside a {
    color: inherit;
    text-decoration: none;
}

aside a:hover {
    text-decoration: underline;
}