@use 'sass:math';

.au-body {
  .au-callout {

    // If the callout is on a row, reset the margin so the keyline lines up.
    // eg .container > .row .au-callout > .col-sm-3 | .col-sm-9
    &.row {
      margin-left: 0;
      margin-right: 0;
      padding-left: math.div($AU-grid-12-gutter-width, 2);
      padding-right: math.div($AU-grid-12-gutter-width, 2);
    }

    & {
      background-color: $callout-bg-colour;
      border-left-color: var(--callout-border--primary);
      max-width: 100%;
    }

    // Remove the line wrapping
    p {
      max-width: 100%;
    }

    // Colours.
    &--secondary {
      border-left-color: var(--callout-border--secondary);
    }

    &--tertiary {
      border-left-color: var(--callout-border--tertiary);
    }

    &--quaternary {
      border-left-color: var(--callout-border--quaternary);
    }

    &--success {
      border-left-color: $AU-color-success;
    }

    // Simple variation
    &.au-callout--simple {
      background: transparent;
      border-left-width: 8px;
      padding: 1rem 1.5rem;
    }
  }
}