@import '../shared-styles/index';

$header-height: 64px;
$header-link-border-width: nx-border-size(xl);

:host {
    @include type-style(header);
}

// this fixes vertical alignment of the .nx-header__row on IE11
:host(.nx-header:not(.nx-header--single-row)) {
    display: flex;
    flex-direction: column;
}

:host(.nx-header.nx-header--single-row),
::ng-deep .nx-header__row {
    display: flex;
    align-items: center;
    padding: nx-border-size(xs) nx-spacer(2m) 0 nx-spacer(2m);
    border-bottom: nx-border-size(xs) solid v(header-border-color);
    height: $header-height;
    justify-content: space-between;
    background: v(header-background-color);

    @media screen and (forced-colors: active) {
        background-color: Canvas;
    }

    @media screen and (max-width: 703px) {
        padding: nx-border-size(xs) nx-spacer(s) 0 nx-spacer(s);
    }
}

::ng-deep .nx-header__link {
    border-bottom: nx-border-size(xl) solid transparent;
    padding-top: $header-link-border-width;
    text-decoration: none;
    display: block;
    margin-right: nx-spacer(2m);
    white-space: nowrap;

    :host-context([dir='rtl']) & {
        margin-right: initial;
        margin-left: nx-spacer(2m);
    }

    &::after {
        display: block;
        content: attr(text-content);
        font-weight: v(header-link-active-font-weight);
        height: 1px;
        overflow: hidden;
        visibility: hidden;
    }

    &.is-active {
        color: v(header-link-active-color);
        border-color: currentColor;

        .nx-header__link-title {
            font-weight: v(header-link-active-font-weight);
        }
    }

    &:hover,
    &:active {
        color: v(header-link-active-color);
        border-color: v(header-link-active-color);
    }

    @media screen and (forced-colors: active) {
        color: LinkText !important;
    }
}

@media screen and (forced-colors: active) {
    ::ng-deep .nx-header__link {
        border-bottom: none;

        &.is-active {
            border-bottom: 4px solid;
        }
    }
}

::ng-deep .nx-header__link-title {
    line-height: 0;
}

::ng-deep .nx-header__brand {
    margin-right: nx-spacer(2m);
    display: flex;
    align-items: stretch;

    :host-context([dir='rtl']) & {
        margin-right: initial;
        margin-left: nx-spacer(2m);
    }
}

::ng-deep .nx-header__actions {
    display: flex;
    align-items: center;
    margin-left: nx-spacer(m);

    &.nx-header__actions--show-separator {
        padding-left: nx-spacer(s);
        border-left-width: nx-border-size(xs);
        border-left-style: solid;
        border-left-color: v(header-border-color);
    }

    :host-context([dir='rtl']) & {
        margin-right: nx-spacer(m);
        margin-left: initial;

        &.nx-header__actions--show-separator {
            padding-right: nx-spacer(s);
            padding-left: initial;
            border-right-width: nx-border-size(xs);
            border-right-style: solid;
            border-right-color: v(header-border-color);
            border-left: none;
        }
    }
}

::ng-deep .nx-header__link.cdk-keyboard-focused {
    @include focus-style;
    border-radius: nx-border-radius(s);
}

:host ::ng-deep a:focus {
    outline: none;
}

::ng-deep .nx-header__app-title {
    display: flex;

    font-size: nx-font-size(3xs);
    font-weight: bold;
    align-items: center;
    padding-left: nx-spacer(s);
    margin-left: nx-spacer(s);
    white-space: nowrap;

    border-left-width: nx-border-size(xs);
    border-left-style: solid;
    border-left-color: v(header-border-color);

    :host-context([dir='rtl']) & {
        padding-right: nx-spacer(s);
        padding-left: initial;
        margin-right: nx-spacer(s);
        margin-left: initial;
        border-right-width: nx-border-size(xs);
        border-right-style: solid;
        border-right-color: v(header-border-color);
        border-left: none;
    }
}
