@import '../../styles/colors';

.callout {
  display: flex;
  padding: 14px;
  border: 1px solid $white;
  box-shadow: 3px 3px 0px $white;
  margin: 12px 0;

  p {
    margin: 0 0 10px 0;

    &:last-child {
      margin-bottom: 0;
    }
  }

  // VARIATIONS
  &--error {
    box-shadow: 5px 5px 0px $vega-red3;
  }

  &--success {
    box-shadow: 5px 5px 0px $vega-green3;
  }

  &--warn {
    box-shadow: 5px 5px 0px $vega-orange3;
  }

  &--action {
    box-shadow: 5px 5px 0px $vega-yellow3;
  }

  &__content {
    width: 100%;

    > :last-child {
      margin-bottom: 0;
    }
  }

  &__title,
  h4,
  h5,
  h6 {
    margin-bottom: 15px;
  }

  &__title {
    margin-top: 0;
  }

  &__icon {
    margin-right: 10px;
    color: $white;
  }
}