/* ==========================================================================
 * Greenfield
 * ========================================================================== */

.mds-c-greenfield {
  --mds-v-greenfield__color: var(--mds-t-text-color--tertiary);

  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  max-width: 38rem;
  min-height: 100%;
  padding: var(--mds-v-greenfield__padding);
  text-align: center;

  &__icon {
    font-size: var(--mds-d-font-size--xxl);
    line-height: 1;

    &--margin-zero {
      margin: 0;
    }
    
    @each $spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs, zero) {
      &&--margin-$(spacing) {
        margin: var(--mds-d-spacing--$(spacing));
      }
    }

    @each $x-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs, zero) {
      &&--margin-vertical-$(x-spacing) {
        margin-bottom: var(--mds-d-spacing--$(x-spacing));
        margin-top: var(--mds-d-spacing--$(x-spacing));
      }
    }

    @each $y-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs, zero) {
      &&--margin-horizontal-$(y-spacing) {
        margin-left: var(--mds-d-spacing--$(y-spacing));
        margin-right: var(--mds-d-spacing--$(y-spacing));
      }
    }
  
    @each $b-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs, zero) {
      &&--margin-bottom-$(b-spacing) {
        margin-bottom: var(--mds-d-spacing--$(b-spacing));
      }
    }
  
    @each $l-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs, zero) {
      &&--margin-left-$(l-spacing) {
        margin-left: var(--mds-d-spacing--$(l-spacing));
      }
    }
  
    @each $t-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs, zero) {
      &&--margin-top-$(t-spacing) {
        margin-top: var(--mds-d-spacing--$(t-spacing));
      }
    }
  
    @each $r-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs, zero) {
      &&--margin-right-$(r-spacing) {
        margin-right: var(--mds-d-spacing--$(r-spacing));
      }
    }
  
  }

  &__image {
    display: block;
    height: auto;
    margin: var(--mds-d-spacing--xl) auto;
    max-width: var(--mds-d-font-size--xxl);
    width: 100%;
  }

  &__title {
    @mixin mds-m-text--size-sm;

    color: var(--mds-v-greenfield__color);

    i {
      font-style: italic;
    }

    s {
      text-decoration: line-through;
    }

    strong {
      font-weight: var(--mds-d-font-weight--semibold);
    }
  }

  &__cta {
    margin-top: var(--mds-d-spacing--xl);
  }
  
  &--no-padding {
    padding: 0;
  }

  @each $spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs, zero) {
    &&--padding-$(spacing) {
      padding: var(--mds-d-spacing--$(spacing));
    }
  }

  @each $x-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs, zero) {
    &&--padding-vertical-$(x-spacing) {
      padding-bottom: var(--mds-d-spacing--$(x-spacing));
      padding-top: var(--mds-d-spacing--$(x-spacing));
    }
  }
  
  @each $y-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs, zero) {
    &&--padding-horizontal-$(y-spacing) {
      padding-left: var(--mds-d-spacing--$(y-spacing));
      padding-right: var(--mds-d-spacing--$(y-spacing));
    }
  }

  @each $b-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs, zero) {
    &&--padding-bottom-$(b-spacing) {
      padding-bottom: var(--mds-d-spacing--$(b-spacing));
    }
  }

  @each $l-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs, zero) {
    &&--padding-left-$(l-spacing) {
      padding-left: var(--mds-d-spacing--$(l-spacing));
    }
  }

  @each $t-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs, zero) {
    &&--padding-top-$(t-spacing) {
      padding-top: var(--mds-d-spacing--$(t-spacing));
    }
  }

  @each $r-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs, zero) {
    &&--padding-right-$(r-spacing) {
      padding-right: var(--mds-d-spacing--$(r-spacing));
    }
  }
}