@import "palette";
@import "variables";
@import "mixins/fontSize";
@mixin color-callout ($color) {
  @include border($color);
  background: rgba($color, 0.15);
  color: lighten($color, 10%);
}

.callout {
  @include border($panel-border-color);
  background-color: $panel-background-color;
  color: $selected-text;
  padding: em-calc(12px) em-calc(16px);
  > .column, > .row > .column {
    padding: 0;
    // backwards compatibilty
  }
  &--warning {
    @include color-callout($warning-color);
  }
  &--error {
    @include color-callout($negative-color);
  }
  &--success {
    @include color-callout($positive-color);
  }
  &--inline {
    display: inline-block;
  }
}