@use 'breakpoints';

// Content Layout Variables
$content-max-width: 1440px;
$content-default-lateral-padding: (
    "mobile": 1rem,
    "tablet": 2.5rem,
    "desktop": 5rem
);

.bz-content {
    max-width: $content-max-width;
    margin-left: auto;
    margin-right: auto;
    padding: 0 map-get($content-default-lateral-padding, 'desktop');
    position: relative;
    z-index: 5;
  
  // Generate
  @media (max-width: breakpoints.$desktop) {
    padding: 0 map-get($content-default-lateral-padding, 'tablet');
    &--md-full {
      width: 100%;
      padding: 0 !important;
      > [class*="bz-border-radius-"] {
        border-radius: 0;
      }
    }
  }

  // Generate tablet classes
  @media (min-width: #{breakpoints.$mobile + 1}) and (max-width: breakpoints.$tablet) {
    padding: 0 map-get($content-default-lateral-padding, 'tablet');

    &--md-only {
      padding: 0 2.5rem;
    }
  }
  
  // Generate mobile classes
  @media (max-width: breakpoints.$mobile) {
    padding: 0 map-get($content-default-lateral-padding, 'mobile');
    &--sm-full {
      width: 100%;
      padding: 0 !important;
      > [class*="bz-border-radius-"] {
        border-radius: 0;
      }
    }
    &--sm-only {
      padding: 0 1rem;
    }
  }
}