@import "../utilities/mixins"

$section-padding: 3rem 1.5rem !default
$section-padding-desktop: 3rem 3rem !default
$section-padding-medium: 9rem 4.5rem !default
$section-padding-large: 18rem 6rem !default

$css-vars-map: ('section-padding': ($section-padding),'section-padding-medium': ($section-padding-medium),'section-padding-large': ($section-padding-large))
// --section-padding: #{$section-padding}
// --section-padding-medium: #{$section-padding-medium}
// --section-padding-large: #{$section-padding-large}

.section, [class^="section-"]
  +registerCSSVars($css-vars-map, $at-root)

.section
  padding: var(--section-padding)
  // Responsiveness
  +desktop
    padding: var(--section-padding-desktop, #{$section-padding-desktop})
    // Sizes
    &.is-medium
      --section-padding: var(--section-padding-medium, #{$section-padding-medium})
    &.is-large
      --section-padding: var(--section-padding-large, #{$section-padding-large})