// ----- CONFIG: $UI.Content

$this = merge({
  defaultWidth: 'tablet'
}, $UI.Content, true)

// ----- COMPONENT

_gutter = 2u

.root
  padding-left _gutter
  padding-right @padding-left
  align-self center
  width 100%

  &.padding
    padding-top _gutter
    padding-bottom @padding-top

  &.width
    &-mobile
      max-width: $UI.media.mobile
    &-tablet
      max-width: $UI.media.tablet
    &-desktop
      max-width: $UI.media.desktop
    &-wide
      max-width: $UI.media.wide
    // &-full is without max-width

// ----- JS EXPORTS

:export
  config: $this