/* --------------- START Mobile Header Initiation Fix --------------- */
/* default styles for the mobile header */
.mobile-header {
    background-color: var(--bg-color);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 48px;
    position: relative;
    width: 100%;

    &.menu-open {
        height: calc(100dvh + 48px);
        overflow-y: auto;
    }

    &.left-icon {
        left: 40px;
        margin: auto;
        position: absolute;
        right: 0;
        top: 82px;
        transform: translateY(-50%);
    }

    &.left-icon .close-icon .button-action-content svg {
        width: 16px;
    }

    &.main-content {
        align-items: center;
        display: flex;
        flex-direction: column;
        height: 115px
    }

    &.close-icon svg {
        width: 16px;
    }   

    &.menu-mobile {
        background-color: var(--mobile-menu-bg-color);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        height: -moz-fit-content;
        height: fit-content;
        min-height: 100vh;
        padding: 0 16px 163px;
        width: 100%;
        z-index: 0;
    }

    @media (min-width: 600px) {
        &.menu-mobile {
            padding-left: 92px;
            padding-right: 92px;
        }
    }
}
/* --------------- END Mobile Header Initiation Fix --------------- */