@import '../config';
@import '../mixins';

.side-header {
    .header-area .header {
        width: 100%;

        .elementor-section-boxed .elementor-container {
            width: 100%;
        }
    }

    .header {
        position: relative;
        min-height: 100vh;
        z-index: 1039;

        .elementor-widget {
            width: 100%;
        }
    }

    .header-area {
        position: relative;
        flex: 0 0 var(--alpha-side-header-width);
        max-width: var(--alpha-side-header-width);
    }

    .content-area {
        flex: 0 0 calc(100% - var(--alpha-side-header-width));
        max-width: calc(100% - var(--alpha-side-header-width));
    }

    .page-wrapper {
        flex-flow: row;

        --alpha-side-header-width: 312px;
    }
}

.side-on-desktop {
    @include mq(lg, max) {

        &.side-header .page-wrapper {
            --alpha-side-header-width: 0px;
        }

        .header-area,
        .content-area {
            flex: 0 0 100%;
            max-width: 100%;
        }

        .page-wrapper {
            flex-flow: column;
        }

        .header {
            min-height: auto;

            .elementor-widget {
                width: auto;
            }
        }
    }
}

.side-on-tablet {
    @include mq(md, max) {

        &.side-header .page-wrapper {
            --alpha-side-header-width: 0px;
        }

        .header-area,
        .content-area {
            flex: 0 0 100%;
            max-width: 100%;
        }

        .page-wrapper {
            flex-flow: column;
        }

        .header {
            min-height: auto;

            .elementor-widget {
                width: auto;
            }
        }
    }
}

.side-on-mobile {
    @include mq(sm, max) {

        &.side-header .page-wrapper {
            --alpha-side-header-width: 0px;
        }

        .header-area,
        .content-area {
            flex: 0 0 100%;
            max-width: 100%;
        }

        .page-wrapper {
            flex-flow: column;
        }

        .header {
            min-height: auto;

            .elementor-widget {
                width: auto;
            }
        }
    }
}