@import "../../themes/liberty.globals";
@include typography();

/**
* @prop --header-z-index: z-index of header. default is 8
*/
lu-header {
    display: block;

    font-size: 14px;
}

/**
* @prop --header-height: Height of the header
*/
:host .lu-header-outer {
    @include padding(0.3em, 1.5em);
    display: block;

    width: 100%;

    height: var(--header-height, 3.5em);

    font-size: 1em;
}

:host header{
    display: flex;
    position: relative;

    flex-flow: row;

    z-index: var(--header-z-index, 8)
}
/**
* @prop --pre-header-background-color: Background color of the pre-header
* @prop --pre-header-color: color of the pre-header text
*/
.pre-header-div{
    @include padding(0.3em, 0.3em);
    display: flex;

    align-items: center;
    justify-content: center;

    background-color: var(--pre-header-background-color, purple);
    color: var(--pre-header-color, white);
}

/**
* @prop light: changes the background color to the lighter header
* @prop --header-light-background-color: Background color for the light header
* @prop --header-light-text-color: Text color of the light header
*/
lu-header[light] .lu-header-outer {
    border-bottom: 1px solid $neutral_lighter;

    background-color: var(--header-light-background-color, #{$neutral_lightest});
    color: var(--header-light-text-color, #{$neutral_darkest});
}

:host(.pre-header) .lu-header-outer {
    @include padding(0.3em, 0.3em);
}

:host(.lu-color) .lu-header-outer {
    border-bottom: 1px solid current-color(shade);

    background-color: current-color(base);
    color: current-color(contrast);
}

/**
* @prop --header-tall-background-color: The header tall background color
* @prop --header-tall-height: Height of the tall header
*/
:host[tall] .lu-header-outer {
    @include padding(1.5em, 6.25em);

    height: var(--header-tall-height, 15.75em);

    background-color: var(--header-tall-background-color, #{$primary});
}

:not(lu-header[tall]) .lu-header-outer .lu-header-row--top,
:not(lu-header[tall]) .lu-header-outer .lu-header-row--bottom {
    display: none;
}

.lu-header-inner {
    display: flex;

    flex-direction: column;

    width: 100%;
    height: 100%;
}

.lu-header-row {
    display: flex;

    flex: 1;

    width: 100%;
}

.lu-header-row > div {
    display: flex;

    flex: 1;
}

::slotted(div) {
    width: 100%;
}

.lu-header-row > div:nth-child(2) {
    flex-grow: 2;
    justify-content: center;

    font-size: 1.2em;

    text-align: center;
}

.lu-header-row > div:nth-child(3) {
    justify-content: flex-end;

    text-align: right;
}

.lu-header-row--middle > div {
    align-items: center;
}

.lu-header-row--bottom > div {
    align-items: flex-end;
}