@use '~@/style/globals';

.DefaultLayoutHeader {
    flex: 0 0 globals.$main-header-height;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    max-height: globals.$main-header-height;
    background-color: globals.$bg-color-main-header;

    &__logo {
        flex: 0 0 globals.$sidebar-width;
        display: none;
        padding: 0.2rem 0.2rem 0;
        text-align: center;

        // stylelint-disable-next-line selector-max-type
        img {
            height: 3rem;
        }
    }

    &__menu-toggle {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        padding: 0 globals.$content-padding-large-vertical;
        cursor: pointer;
        align-self: stretch;
    }

    &__title {
        flex: 1;
        color: #fff;
        font-size: 1.6rem;
        font-weight: 400;
    }

    &__menu {
        flex: 0 0 auto;
        display: flex;
        flex-flow: row nowrap;
        align-self: stretch;
    }

    @media (min-width: globals.$screen-mobile) {
        &__logo {
            display: block;
        }

        &__menu-toggle {
            display: none;
        }

        &__title {
            padding-left: globals.$content-padding-small-vertical;
        }
    }

    @media (min-width: globals.$screen-desktop) {
        &__logo {
            flex: 0 0 globals.$sidebar-full-width;
        }
    }
}
