////
/// Block alignment styles
///
/// Styles for blocks that use the alignwide and alignfull classes.
///
/// @group  Components
/// @author Sky Shabatura <theme@sky.camp>
/// @link   https://taproot-theme.com
////

.alignfull {

    @include screen('tablet-and-under') {
        max-width: 100vw;
        width: 100vw;
        margin-left: calc( 50% - 50vw );
    }

    @include screen('desktop') {
        .app-main--no-sidebar & {
            width: 100vw;
            max-width: 100vw;
            margin-left: calc( 50% - 50vw );
        }
    }

    @include screen('mobile') {
        // padding-left: var( --layout-spacing );
        // padding-right: var( --layout-spacing );
    }

    &.has-background {

        @include screen('mobile') {
            padding-left: var( --layout-spacing );
            padding-right: var( --layout-spacing );
        }
    
        @include screen('tablet-and-under') {
            .app-main--has-sidebar & {
                padding: var( --layout-spacing );
            }
        }

        .app-main--no-sidebar & {
            padding: var( --layout-spacing );
        }

        .alignfull:not(.has-background) {
            padding-left: 0;
            padding-right: 0;
        }
    }
}

.app-main {

    // Sidebar Layouts
    &--has-sidebar {

        @include screen('tablet-and-under') {
            @include alignfull-spacing-styles();
        }

        @include screen('tablet') {
            @include alignfull-content-styles();
        }
    }

    // No Sidebar Layout
    &--no-sidebar {

        @include screen('tablet-and-under') {
            @include alignfull-spacing-styles();
        }

        @include screen('tablet-and-up') {
            @include alignfull-content-styles();
        }
    }
}
