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

span {
    font-family: var(--dx-g-font-sans);
    font-size: var(--dx-g-text-2xs);
    color: var(--dx-c-breadcrumb-color);
    margin-top: 0.5px;
}

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

nav > *:not(:last-child) {
    margin-right: 6px;
}

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

a:hover {
    transition: var(--dx-g-transition-hue-1x);
    color: var(--dx-c-breadcrumb-hover-color);
}

.home-link {
    flex-shrink: 0;
    margin-right: var(--dx-g-spacing-xs);
}

.home-link > .home-link-title {
    color: var(--dx-c-home-link-color);
    line-height: 18px;
}

.home-link > svg {
    margin-right: 12px;
    width: 18px;
}

.helmet {
    height: var(--dx-g-spacing-xl);
    position: relative;
}

.helmet.variant_clear {
    background-color: white;

    --dx-c-home-link-color: var(--dx-g-blue-natural-10);
    --dx-c-breadcrumb-color: var(--dx-g-gray-50);
    --dx-c-breadcrumb-hover-color: var(--dx-g-cloud-blue-vibrant-40);
}

.helmet.variant_intense {
    background-color: var(--dx-g-blue-vibrant-40);

    --dx-c-home-link-color: white;
    --dx-c-breadcrumb-color: var(--dx-g-blue-vibrant-90);
    --dx-c-breadcrumb-hover-color: var(--dx-g-cloud-blue-vibrant-80);
}

.helmet.variant_light {
    background-color: var(--dx-g-cloud-blue-vibrant-95);

    --dx-c-home-link-color: var(--dx-g-blue-vibrant-20);
    --dx-c-breadcrumb-color: var(--dx-g-gray-30);
    --dx-c-breadcrumb-hover-color: var(--dx-g-cloud-blue-vibrant-40);
}

.helmet.variant_neutral {
    background-color: var(--dx-g-gray-95);

    --dx-c-home-link-color: var(--dx-g-gray-30);
    --dx-c-breadcrumb-color: var(--dx-g-gray-50);
    --dx-c-breadcrumb-hover-color: var(--dx-g-cloud-blue-vibrant-40);
}