bih/spotify-ruby

//
// Callout (components/_callout.scss)
//

// ----- General ----- 
.callout {
  background-color: $color-callout;
  border: 2px solid darken($color-callout, 4%);
  margin: 0 0 1.25rem 0;
  padding: 0.9375rem 1.25rem 0.625rem 1.25rem;

  @media (min-width: $screen-sm-min) {
    padding: 1.25rem 1.875rem 0.9375rem 1.875rem;
  }

  p {
    font-size: 0.9375em;
    line-height: 1.8em;
    margin-bottom: 0.625rem;
  }

  strong {
    color: $color-dark;
    display: block;
    font-family: $font-family-secondary;
    font-size: 1.133em;
    font-weight: 500;
    margin-bottom: 0.625rem;
  }
}

// ----- Variations ----- 
.callout {
  &--success {
    background-color: $color-callout-success;
    border-color: darken($color-callout-success, 6%);

    strong {
      color: darken($color-callout-success, 82%);
    }
  }

  &--info {
    background-color: $color-callout-info;
    border-color: darken($color-callout-info, 4%);

    strong {
      color: darken($color-callout-info, 82%);
    }
  }

  &--warning {
    background-color: $color-callout-warning;
    border-color: darken($color-callout-warning, 10%);

    strong {
      color: darken($color-callout-warning, 70%);
    }
  }

  &--danger {
    background-color: $color-callout-danger;
    border-color: darken($color-callout-danger, 4%);

    strong {
      color: darken($color-callout-danger, 70%);
    }
  }
}