_modules.scss

/*
  Modules
  ========
  For Joomla Modules
*/
.c-modules {
  $api: (
    breakpoint: 'm'
  );

  // ::::::::: ROOT SELECTOR
  $root: #{&};

  // ::::::::: API GRABBER
  @function api($keys...) {
    @return map-deep-get($api, $keys...);
  }

  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;

  // ::::::::: MODIFIER
  // [root]--s-fullwidth
  &--s-fullwidth {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    padding-left: unit-check(20);
    padding-right: unit-check(20);

    #{$root}--t-normal {
      @extend %e-container;
    }

    #{$root}--t-max {
      margin-left: auto;
      margin-right: auto;
    }
  }

  // [root]--bg-primary
  &--bg-primary {
    background-color: c('primary');
    color: c('white');

    #{$root}__headline {
      color: c('white');

      &--s-primary {
        color: blue;
      }
    }
  }

  &--bg-gray {
    background-color: c('testimonials');
  }

  // [root]--t-max
  &--t-max {
    max-width: 857px;
  }

  &--o-yes {
    border-bottom: 1px solid c('primary');
    border-top: 1px solid c('primary');
  }

  // [root]--a-center
  &--a-center {
    text-align: center;

    &#{$root}--t-max {
      margin-left: auto;
      margin-right: auto;
    }
  }

  &--pt-0  {padding-top: 0;} /* stylelint-disable-line */
  &--pt-10 {padding-top: s(.5);} /* stylelint-disable-line */
  &--pt-20 {padding-top: s(1);} /* stylelint-disable-line */
  &--pt-30 {padding-top: s(1.5);} /* stylelint-disable-line */
  &--pt-40 {padding-top: s(2);} /* stylelint-disable-line */
  &--pt-50 {padding-top: s(2.5);} /* stylelint-disable-line */
  &--pb-0  {padding-bottom: 0;} /* stylelint-disable-line */
  &--pb-10 {padding-bottom: s(.5);} /* stylelint-disable-line */
  &--pb-20 {padding-bottom: s(1);} /* stylelint-disable-line */
  &--pb-30 {padding-bottom: s(1.5);} /* stylelint-disable-line */
  &--pb-40 {padding-bottom: s(2);} /* stylelint-disable-line */
  &--pb-50 {padding-bottom: s(2.5);} /* stylelint-disable-line */
  &--mt-0  {margin-top: 0;} /* stylelint-disable-line */
  &--mt-10 {margin-top: s(.5);} /* stylelint-disable-line */
  &--mt-20 {margin-top: s(1);} /* stylelint-disable-line */
  &--mt-30 {margin-top: s(1.5);} /* stylelint-disable-line */
  &--mt-40 {margin-top: s(2);} /* stylelint-disable-line */
  &--mt-50 {margin-top: s(2.5);} /* stylelint-disable-line */
  &--mb-0  {margin-bottom: 0;} /* stylelint-disable-line */
  &--mb-10 {margin-bottom: s(.5);} /* stylelint-disable-line */
  &--mb-20 {margin-bottom: s(1);} /* stylelint-disable-line */
  &--mb-30 {margin-bottom: s(1.5);} /* stylelint-disable-line */
  &--mb-40 {margin-bottom: s(2);} /* stylelint-disable-line */
  &--mb-50 {margin-bottom: s(2.5);} /* stylelint-disable-line */

  // [root]--a-center
  &--a-right {
    text-align: right;
  }

  // [root]--s-primary
  &--s-primary {
    color: c('primary');
  }

  // [root]--s-headline
  &__headline {
    &--s-primary {
      color: c('primary');
    }
  }

  &__inner-bg {
    background: rgba(255,255,255,0.9);
    padding-top: 35px;
    padding-bottom: 35px;
    padding-right: 15px;
    padding-left: 15px;

    @include break(api(breakpoint)) {
      padding-right: 45px;
      padding-left: 45px;
    }
  }
}