$sg-border: #ddd;
$sg-grey: #eee;
$sg-help-text: #959595;
$sg-highlight-background: #f7f7f9;

.styleguide {
  .sg-color {
    @include border-radius(3px);
    color: $white;
    font-family: 'Cachet';
    margin-bottom: 12px;
    min-height: 50px;
    padding: 12px;

    &.bg-white {
      border: 1px solid $default-grey;
      color: $black;
      padding: 11px;
    }
  }

  .bg-white {
    background-color: $white;
  }
  .bg-black {
    background-color: $black;
  }

  .bg-sky-blue {
    background-color: $sky-blue;
  }
  .bg-light-blue {
    background-color: $light-blue;
  }
  .bg-blue {
    background-color: $blue;
  }
  .bg-dark-blue {
    background-color: $dark-blue;
  }

  .bg-pink {
    background-color: $pink;
  }
  .bg-dark-magenta {
    background-color: $dark-magenta;
  }
  .bg-purple {
    background-color: $purple;
  }

  .bg-orange {
    background-color: $orange;
  }
  .bg-yellow {
    background-color: $yellow;
  }

  .bg-lighter-grey {
    background-color: $lighter-grey;
  }
  .bg-light-grey {
    background-color: $light-grey;
  }
  .bg-medium-grey {
    background-color: $medium-grey;
  }
  .bg-default-grey {
    background-color: $default-grey;
  }
  .bg-dark-grey {
    background-color: $dark-grey;
  }

  .bs-docs-section {
    margin-bottom: 100px;
  }

  .bs-example {
    position: relative;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 50px;

    *zoom: 1;

    &:before,
    &:after {
      display: table;
      content: "";
    }

    &:after {
      clear: both;
    }
  }

  .highlight {
    border-left: 3px solid $dark-blue;
  }

  .fontawesome-icon-list .fa-hover a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    color: #222;
    line-height: 32px;
    height: 32px;
    padding-left: 10px;
    border-radius: 4px;
  }

  .fontawesome-icon-list .fa-hover a .fa {
    width: 32px;
    font-size: 14px;
    display: inline-block;
    text-align: right;
    margin-right: 10px;
  }

  .fontawesome-icon-list .fa-hover a:hover {
    background-color: #1d9d74;
    color: #fff;
    text-decoration: none;
    .fa {
      font-size: 28px;
      vertical-align: -6px;
    }
  }

  .underline {
    border-bottom: 3px solid $dark-blue;
    padding-bottom: 10px;
  }
}