@import "dxHelpers/reset";
@import "dxHelpers/text";

:host {
    --dx-c-breadcrumbs-title-color: var(--dx-g-blue-vibrant-20);
    --dx-c-breadcrumbs-breadcrumb-color: var(--dx-g-blue-vibrant-20);
}

nav {
    display: flex;
    align-items: center;
    height: 100%;
}

nav > *:not(:last-child) {
    margin-right: var(--dx-g-spacing-xs);
}

a,
span {
    transition: var(--dx-g-transition-hue-1x);
    display: flex;
    align-items: center;
}

dx-logo {
    --dx-c-logo-label-color: var(--dx-c-breadcrumbs-title-color);
}

.breadcrumb {
    white-space: nowrap;
}

.breadcrumb,
span {
    font-family: var(--dx-g-font-sans);
    font-size: var(--dx-g-text-sm);
    font-weight: var(--dx-g-font-bold);
    color: var(--dx-c-breadcrumbs-breadcrumb-color);
}

a:hover {
    color: var(--dx-g-blue-vibrant-40);
}

span.breadcrumb {
    font-weight: var(--dx-g-font-normal);
    overflow: hidden;
    position: relative;
    display: inline-block;
    text-decoration: none;
    text-overflow: ellipsis;
}

dx-dropdown {
    display: none;
}

.breadcrumb-overflow {
    flex-grow: 1;
    display: block;
}

.breadcrumbs_options-slash {
    display: none;
}

@media (max-width: 1024px) {
    nav.state-long dx-dropdown {
        display: initial;
    }

    nav.state-long .breadcrumb:not(span) {
        display: none;
    }

    nav.state-long.hide-current-location .breadcrumb:not(span):last-of-type {
        display: initial;
    }

    nav.state-long
        .breadcrumb-slash:not(:nth-last-child(1), :nth-last-child(2)) {
        display: none;
    }

    nav.state-long .breadcrumbs_options-slash {
        display: flex;
    }
}

@media (max-width: 768px) {
    dx-dropdown {
        display: initial;
    }

    .breadcrumb:not(span) {
        display: none;
    }

    nav.hide-current-location .breadcrumb:not(span):last-of-type {
        display: initial;
    }

    .breadcrumb-slash:not(:nth-last-child(1), :nth-last-child(2)) {
        display: none;
    }

    .breadcrumbs_options-slash {
        display: flex;
    }
}