/*------------------------------------*\
    WRAPPERS
\*------------------------------------*/

@use "../../helpers";

/// Horizontal padding either side of the wrapper
/// @type Number
$wrapper__padding: 1rem !default;

/// Fixed width of the wrapper at medium breakpoint
/// @type Number
$wrapper__width--medium: 48rem !default;

/// Fixed width of the wrapper at large breakpoint
/// @type Number
$wrapper__width--large: 60rem !default;

/// Fixed width of the wrapper at xlarge breakpoint
/// @type Number
$wrapper__width--xlarge: 72rem !default;

.ds_wrapper {
    margin: 0 auto;
    padding: 0 $wrapper__padding;
    width: 100%;

    &--no-overflow {
        overflow: hidden;
    }
}

@include helpers.ds_media-query(medium) {
    .ds_wrapper {
        width: $wrapper__width--medium;
    }
}

@include helpers.ds_media-query(large) {
    .ds_wrapper {
        width: $wrapper__width--large;
    }
}

@include helpers.ds_media-query(xlarge) {
    .ds_wrapper {
        width: $wrapper__width--xlarge;
    }
}