// Utilities :: Scaffold

.u-scaffold {
  margin: 0 auto;
  max-width: $fabric-global-width;
  &--debug > * {
    outline: 1px dashed white;
  }
  &--debug-children {
    > div {
      outline: 1px dashed white;
    }
    * {
      outline: 1px dashed red;
    }
  }

  &--light {
    background-color: fabric-color('white');
    color: fabric-color('medium-grey');
    padding: $fabric-global-spacing-unit-large;

    &.u-scaffold--debug > * {
      outline: 1px dashed black;
    }

    // select {
    //   border-color: fabric-color('medium-grey');
    //   color: fabric-color('medium-grey');
    // }

    svg {
      fill: fabric-color('medium-grey');
    }
  }

  &--dark {
    background-color: fabric-color('medium-grey');
    color: fabric-color('white');
    padding: $fabric-global-spacing-unit-large;

    select {
      border-color: fabric-color('white');
      color: fabric-color('white');
    }

    svg {
      fill: fabric-color('white');
    }
  }

  &__block {
    padding: 24px;
    text-align: center;
  }
}

$guide-color-1: rgba(fabric-color('primary'), 0.3);

@mixin baseline-guide {
  background-image: linear-gradient(
    $guide-color-1 1px,
    white 1px,
    white $fabric-rhythm-unit/2 * 1
  );
  background-size: 100% rem($fabric-rhythm-unit/2);
}

.u-baseline {
  @include baseline-guide();
  padding: 25px $fabric-global-spacing-unit $fabric-global-spacing-unit;
  // border: 1px solid $guide-color-1;
  border-top: 0;

  &__block {
    background: rgba(fabric-color('grey'), 0.2);
    // outline: 1px dashed rgba(0, 0, 0, 0.1);
  }
}