div.guide-example {
  border: $base-border;

  padding: 45px 30px 30px 30px;
  margin-top: 15px;
  margin-bottom: 45px;

  position: relative;
  overflow: hidden;

  &:before {
    content: "EXAMPLE";
    position: absolute;
    top: 0;
    left: 0;
    background: $medium-gray;
    color: $white;
    padding: 0.21053em 0.78947em 0.21053em 0.78947em;
    font-size: $small-font-size;
  }
}

div.swatch-wrapper {
  float: left;
  width: 20%;
  text-align: center;
}

div.swatch {
  margin: 15px auto 15px auto;
  width: 60px;
  height: 60px;
  border-radius: 100%;
}

// standard colours
.swatch-white { background-color: $white; border: $base-border; }
.swatch-black { background-color: $black; }
.swatch-light-gray { background-color: $light-gray; }
.swatch-medium-gray { background-color: $medium-gray; }
.swatch-dark-gray { background-color: $dark-gray; }
.swatch-red { background-color: $red; }
.swatch-green { background-color: $green; }
.swatch-blue { background-color: $blue; }
.swatch-orange { background-color: $orange; }

// specific/task colours
.swatch-google-red { background-color: $google-red; }
.swatch-facebook-blue { background-color: $facebook-blue; }
.swatch-page-color { background-color: $page-color; border: $base-border; }
.swatch-base-font-color { background-color: $base-font-color; }
.swatch-base-border-color { background-color: $base-border-color; }
.swatch-link-color { background-color: $link-color; }
.swatch-link-hover-color { background-color: $link-hover-color; }
.swatch-link-active-color { background-color: $link-active-color; }
.swatch-link-visited-color { background-color: $link-active-color; }
.swatch-alert-color { background-color: $alert-color; }
.swatch-error-color { background-color: $error-color; }
.swatch-notice-color { background-color: $notice-color; }
.swatch-success-color { background-color: $success-color; }