@import 'app-core/base';
@import 'fear-core-ui/extends';

$font__code: 100% courier, monospace;
$color__code--background: #fff7f0;

body {
  padding: $spacing-default;
}

pre {
  font: $font__code;
  border: 1px solid $color__brand--light-grey;
  overflow-x: scroll;
  width: 90%;
  padding: 2rem 0 1rem 0;
  margin: 1rem auto 2rem auto;
  background: $color__code--background;
  color: $color__brand--black;
}

hr {
  margin: $spacing-default-med 0;
  border: 1px solid $color__brand--light-grey;
}

h3 {
  display: block;
}

.example__position {
  display: inline-block;
  vertical-align: top;
}


.example-wrapper {

  height: 200px;
  width: 200px;
  background-color: $color__brand--background-grey;
  margin: $spacing-default;

  $size: 50px;

  > div {
    width: $size;
    height: $size;

    &:first-child {
      background-color: $color__brand--dark-grey;
    }

    &:nth-child(2) {
      background-color: $color__brand--green;
    }

    &:last-child {
      background-color: $color__brand--information-blue;
    }


  }
}

.flx__row {
  @include mns-display(flex);
}

.flx__row--reverse {
  @include mns-display(flex);
  @include mns-flex-direction(row-reverse);
}

.flx__column {
  @include mns-display(flex);
  @include mns-flex-direction(column);
}

.flx__column--reverse {
  @include mns-display(flex);
  @include mns-flex-direction(column-reverse);
}

.flx__justify-content--center {
  @include mns-display(flex);
  @include mns-justify-content(center);
}