$forge-path: "~@dosomething/forge/assets/";

// Import Forge.
@import "~@dosomething/forge/scss/forge";

// Remove the gray background from the page.
body, html {
  background: #fff;
}

// Remove the shadow from the chrome so it's border-less.
.chrome > .wrapper {
  box-shadow: none;
}

// The navigation shouldn't float on mobile here.
@include media($mobile) {
  .navigation .navigation__logo {
    position: static;
  }
}

// Fix a strange issue with the Container on mobile.
// @TODO: Why is this happening here?
.container > .wrapper {
  width: 100%;
}

// Add a new `.-centered` variation to the Container Block.
.container .container__block {
  &.-centered {
    @include media($tablet) {
      @include span(9 of 12);
      @include push(2);

      text-align: center;

      // @TODO: Hacky!
      .field-label { text-align: left; }
    }
  }
}

// Validation Errors
.validation-error {
  color: #ff4747;
  text-align: left;
  margin: 12px 0;

  & h4 {
    color: #ff4747
  }
}

$forge-path: "~@dosomething/forge/assets/";

// Import Forge.
@import "~@dosomething/forge/scss/forge";

// Remove the gray background from the page.
body, html {
  background: #fff;
}

// Remove the shadow from the chrome so it's border-less.
.chrome > .wrapper {
  box-shadow: none;
}

// The navigation shouldn't float on mobile here.
@include media($mobile) {
  .navigation .navigation__logo {
    position: static;
  }
}

// Fix a strange issue with the Container on mobile.
// @TODO: Why is this happening here?
.container > .wrapper {
  width: 100%;
}

// Add a new `.-centered` variation to the Container Block.
.container .container__block {
  &.-centered {
    @include media($tablet) {
      float: none;
      max-width: 600px;
      margin: $base-spacing auto;
      text-align: center;

      // @TODO: Hacky!
      .field-label { text-align: left; }
    }
  }
}

// Validation Errors
.validation-error {
  color: #ff4747;
  text-align: left;
  margin: 12px 0;

  & h4 {
    color: #ff4747
  }
}

Make the "centered" container fixed-width.
Make the "centered" container fixed-width.

This makes it visually identical to our modals, and avoids issues where
fluid container is either a bit too big or a bit too small.
