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

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

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

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

.bg-grey {
  background-color: $grey;
}

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

.bg-green-light {
  background-color: $green-light;
}

.bg-green-medium {
  background-color: $green-medium;
}

.bg-green-dark {
  background-color: $green-dark;
}

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

.bg-blue-medium {
  background-color: $blue-medium;
}

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

.bg-purple-light {
  background-color: $purple-light;
}

.bg-purple-medium {
  background-color: $purple-medium;
}

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

.bg-red-light {
  background-color: $red-light;
}

.bg-red-medium {
  background-color: $red-medium;
}

.bg-red-dark {
  background-color: $red-dark;
}

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

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

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

.bs-example {
  @include box-shadow(inset 0 3px 6px rgba(0, 0, 0, .05));
  border-color: $sg-grey;
  border-style: solid;
  border-width: 1px 0;
  margin: 0 -15px 15px;
  padding: 45px 15px 15px;
  position: relative;

  &:after {
    color: $sg-help-text;
    content: 'Example';
    font-size: 12px;
    font-weight: 700;
    left: 15px;
    letter-spacing: 1px;
    position: absolute;
    text-transform: uppercase;
    top: 15px;
  }

  .carousel-caption {
    margin-right: 35px;

    h1 {
      color: $white;
    }
  }
}

@media (min-width: 768px) {
  .bs-example {
    @include box-shadow(none);
    background-color: $white;
    border-color: $sg-border;
    border-radius: 4px 4px 0 0;
    border-width: 1px;
    margin-left: 0;
    margin-right: 0;
  }
}

.highlight {
  background-color: $sg-highlight-background;
  border: 1px solid $sg-border;
  border-radius: 4px;
  margin-bottom: 14px;
  padding: 9px 14px;

  pre {
    background-color: transparent;
    border: 0;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
    white-space: nowrap;
    word-break: normal;

    code {
      background-color: transparent;
      color: $grey;
      font-size: inherit;
      padding: 0;

      &:first-child {
        display: inline-block;
        padding-right: 45px;
      }
    }
  }
}

.bs-example + .highlight {
  border-radius: 0;
  border-width: 0 0 1px;
  margin: -15px -15px 15px;
}

@media (min-width: 768px) {
  .bs-example + .highlight {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-width: 1px;
    margin-left: 0;
    margin-right: 0;
    margin-top: -16px;
  }
}
