app-nav {
    box-sizing: border-box;
    white-space: nowrap;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: stretch;
    background-color: var(--color-green);
    color: white;
    z-index: 55;
    width: 13vw;
    display: none;
}

app-nav.on {
    display: flex;
}

app-nav > a {
    padding: var(--u-xs);
}

app-nav > a > img {
    height: var(--u);
}

app-nav > header {
    background-color: var(--color-green-lg);
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    padding: 1rem;
    padding-left: var(--u-xs);
    gap: 1rem;
    margin-bottom: var(--u-sm);
}

app-nav > header > header {
    height: var(--u);
    aspect-ratio: 1;
    border-radius: 50%;
    font-size: 1.5rem;
    background-color: var(--color-green);
    display: flex;
    justify-content: center;
    align-items: center;
}

app-nav > header > footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.25rem;
    width: 1px;
    flex-shrink: 1;
    flex-grow: 1;
}

app-nav > header > footer > output-i18n {
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

app-nav > header > i:last-of-type {
    margin-left: auto;
    font-size: 1.5rem;
}

app-nav > main {
    margin-bottom: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    flex-grow: 1;
    flex-shrink: 1;
}

app-nav > main > a,
app-nav > main > div {
    background-color: transparent;
    color: white;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: var(--u);
    padding-left: 20%;
    padding-right: 20%;
    font-size: 1.1rem;
    cursor: pointer;
    flex-grow: 0;
    flex-shrink: 0;
}

app-nav > main > a.grade {
    gap: var(--u-4xs);
}

app-nav > main > a.grade > div {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: var(--u);
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--u-2xs);
    min-width: var(--u-2xs);
    padding: 0 var(--u-4xs);
    font-size: 0.75rem;
}

app-nav > main > a.grade > aside > div:empty {
    display: none;
}

app-nav > main > a > output-i18n,
app-nav > main > div > output-i18n {
    white-space: pre-wrap;
}

app-nav > main > div.other-function > i {
    font-size: 1.5rem;
    margin-bottom: -0.05rem;
    margin-left: 0.5rem;
    display: none;
}

app-nav[data-expand="other"] > main > div.other-function > i.left {
    display: flex;
}

app-nav:not([data-expand="other"]) > main > div.other-function > i.right {
    display: flex;
}

app-nav > main > div > main {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    position: absolute;
    left: 100%;
    color: white;
    background-color: var(--color-green);
    overflow: hidden;
    display: none;
    bottom: 0;
}

app-nav[data-expand="other"] > main > div > main {
    display: flex;
}

app-nav > main > div > main > * {
    background-color: var(--color-green-lg);
    color: white;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: var(--u);
    padding: 0 var(--u-sm);
    font-size: 1rem;
}

app-nav > footer {
    height: var(--u);
    display: flex;
    justify-content: stretch;
    align-items: stretch;
}

app-nav > footer > * {
    color: white;
    font-size: 1.5rem;
    width: 1px;
    flex-grow: 1;
}

app-nav > footer > a:first-child {
    background-color: rgba(0, 0, 0, 0.05);
}

app-nav[data-roles="1"] > footer > div.role {
    display: none;
}

app-nav[data-role="super-admin"] [data-role]:not([data-role*="super-admin"]),
app-nav[data-role="business-admin"] [data-role]:not([data-role*="business-admin"]),
app-nav[data-role="school-admin"] [data-role]:not([data-role*="school-admin"]),
app-nav[data-role="class-teacher"] [data-role]:not([data-role*="class-teacher"]),
app-nav[data-role="parent"] [data-role]:not([data-role*="parent"]),
app-nav[data-role="null"] [data-role]:not([data-role*="null"]) {
    display: none;
}

app-nav:is([data-href*="/business"], [data-href*="/list?type=business"]) > main > a.business,
app-nav:is([data-href*="/school"], [data-href*="/list?type=school"]) > main > a.school,
app-nav:is([data-href*="/class"], [data-href*="/list?type=class"]) > main > a.class,
app-nav:is([data-href*="/course"], [data-href*="/list?type=course"]) > main > a.course,
app-nav:is([data-href*="/user"], [data-href*="/list?type=user"]) > main > a.user,
app-nav:is([data-href*="/child"], [data-href*="/list?type=child"]) > main > a.child,
app-nav:is([data-href*="/enroll"]) > main > a.enroll,
app-nav:is([data-href*="/teach"]) > main > a.teach,
app-nav:is([data-href*="/prepare"]) > main > a.prepare,
app-nav:is([data-href*="/watch"]) > main > a.watch,
app-nav:is([data-href*="/license-generate"]) > main > a.license-generate,
app-nav:is([data-href*="/license-sell"]) > main > a.license-sell,
app-nav:is([data-href*="/toolbox"]) > main > a.toolbox,
app-nav:is([data-href*="/home-review"]) > main > a.progress,
app-nav:is([data-href*="/grade"]) > main > a.grade,
app-nav:is([data-href*="/report"]) > main > a.report,
app-nav[data-expand="other"] > main > div.other-function,
app-nav:is([data-href*="/me"]) > footer > a,
app-nav[data-expand="settings"] > footer > div.settings {
    background-color: var(--color-lime);
}

app-nav > aside {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    position: absolute;
    left: 100%;
    color: white;
    background-color: var(--color-green);
    gap: 1px;
    overflow: hidden;
    width: 18vw;
    display: none;
}

app-nav[data-expand="settings"] > aside {
    display: flex;
}

app-nav > aside > :not(:first-child) {
    cursor: pointer;
    height: var(--u);
}

app-nav > aside > * {
    background-color: var(--color-green-lg);
    color: white;
}

app-nav > aside > a:first-child {
    padding: var(--u-xs) 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

app-nav > aside > a:first-child > output-i18n {
    white-space: nowrap;
}

app-nav > aside > a:first-child > i.icon {
    background-color: var(--color-lime);
    color: white;
    height: var(--u);
    width: var(--u);
    border-radius: 50%;
    font-size: 3rem;
    cursor: default;
}

app-nav > aside > a:first-child > footer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    gap: 0.5rem;
}

app-nav > aside > a:first-child > footer > output-i18n {
    line-height: 90%;
}

app-nav > aside > a:first-child > footer > i.change-role {
    display: flex;
    background-color: transparent;
    color: white;
    font-size: 1.5rem;
    padding: 0;
    margin-top: auto;
    margin-bottom: auto;
}

app-nav > aside > a:first-child > footer > i.change-role[data-roles="1"] {
    display: none;
}

app-nav > aside > a:first-child > footer > * {
    white-space: nowrap;
    padding: 0.5rem;
    background-color: var(--color-green);
    color: white;
    border-radius: var(--u);
    font-size: 0.75rem;
    display: flex;
}

app-nav > aside > :is(div, a) {
    padding: 1rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

app-nav > aside > :is(div, a) > i {
    font-size: 1.5rem;
}

app-nav > aside > div > select-i18n > select > option {
    color: rgb(102, 102, 102);
}