@use "../../core/size";
@use "variables" as *;

$page-header-separator-width: 1px !default;

.page-header {
    display: flex;
    flex-direction: row;
    width: 100%;
    color: $pageheader-color-text;
    background-color: $pageheader-color-background;
    padding: size.$padding-100 0 size.$padding-100 size.$padding-100;
    align-items: center;
    overflow: hidden;

    &__logo {
        display: flex;
        margin: 0;
        padding: 0;
        align-items: center;
        box-sizing: border-box;

        & > a {
            display: inline-flex;
        }
        &::after {
            content: " ";
            height: 1.38rem;
            padding: calc($page-header-separator-width / 2);
            margin: 0 size.$padding-100 0.155rem;
        }
    }

    &__app-name {
        padding-top: 0.22rem;
        margin: 0;
        font-size: var(--f-font-size-h3);
        font-weight: var(--f-font-weight-medium);
        color: $pageheader-appname-color-text;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 9rem;
    }

    &__right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-grow: 1;
        white-space: nowrap;
        padding-top: 0.4rem;
        font-size: var(--f-font-size-standard);

        &-slot {
            padding-left: size.$padding-100;
            padding-right: size.$padding-100;
        }
    }
}