// This file is meant to contain placeholder styles to be extended into styles.
// Keep in mind that these can act unexpectedly in media queries, so only use
// extends on things that won't be changing in media queries.

// EXAMPLE:
//
// %button {
//   // everything that extends %button
//   // will be defined here.
//   text-align: center;
//   padding: 5px 10px;
// }
// .confirm-button {
//   @extend %button;
//   color: white;
//   background: green;
// }
// .disabled-button {
//   @extend %button;
//   color: gray;
//   background: darkgray;
// }

%slanted-bottom {
  &::after {
    content: '';
    display: block;
    background: $c--white;
    @include rem( height, 8 );
    position: absolute;
    @include rem( bottom, -4);
    z-index: 5;
    width: 105%;
    transform: rotate(-3deg);
    -webkit-backface-visibility: hidden;
    padding: 2px;
  }
}

%slanted-top {
  &::before {
    content: '';
    display: block;
    background: $c--white;
    @include rem( height, 8 );
    position: absolute;
    @include rem( top, -4);
    @include rem( left, -1);
    z-index: 5;
    width: 105%;
    transform: rotate(-3deg);
    -webkit-backface-visibility: hidden;
    padding: 2px;
  }
}

%full-size {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

%pseudo-border {
  &::after {
    content: '';
    display: block;
    background: $c--green;
    height: 3px;
    @include rem( width, 5 );
    @include rem( margin-top, 1.5 );
    @include rem( margin-bottom, 2 );
    margin-left: auto;
    margin-right: auto;
  }
}