*,
*::before,
*::after,
:host {
    box-sizing: border-box;
}

:host {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 45px;
    color: var(--color-layout-contrast);
}

:host > nav {
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

.node {
    background-color: transparent;
    border: 0;
    font: inherit;
    position: relative;
    display: flex;
    align-items: center;
    -webkit-text-decoration: none;
    text-decoration: none;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    transition: color 500ms ease;
    outline-offset: -2px;
}

.node.link-active {
        color: var(--color-layout-hightlight);
    }

.node[disabled] {
        cursor: not-allowed;
        opacity: 0.5;
    }

.caret {
    margin-left: 10px;
}

.caret::part(icon) {
        transition: transform 500ms ease;
    }

:host([high-contrast]) es-nav-node-0 > nav {
            border-color: var(--color-layout-highlight);
        }

:host([high-contrast]) es-nav-node-1:not(last-child) {
        border-bottom: 1px solid var(--color-layout-highlight);
    }

:host([high-contrast]) es-nav-node-1.visible:not(last-child) es-nav-node-2:last-child {
            margin-bottom: 20px;
        }