@use "00-base/configure" as *;

@use "sass:color" as *;

.ma__callout-message__container {
  position: relative;
  max-width: $max-width;

  .pre-content > &,
  .post-content > &,
  .main-content--full .page-content > & {

    @include ma-container();

  }
}

.ma__callout-message {
  border: 3px solid;
  display:block;
  width: 100%;
  padding: 15px 20px;
  background-color: mix(#fff, $c-font-link,90%);
  border-color: mix(#fff, $c-font-link,50%);
  box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25);

  @media ($bp-small-min) {
    padding: 30px;
  }

  @media ($bp-large-min) {
    float:left;
    margin-right: $column;
    width: calc(100% - #{$layout-sidebar-width} - #{$column});
  }

  @media ($bp-x-large-min) {
    width: calc(100% - #{$layout-sidebar-width} - #{$column} - (#{$gutter} * 2));
  }

  &--white {
    background-color: $c-white;
    border-color: mix(#fff, $c-font-detail,70%);
    box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25);
  }

  @for $i from 2 through 6 {
    h#{$i} {
      margin-top: 0;
      color: $c-font-heading;
      font-weight: $fonts-bold;

      @include ma-heading($i+1);
    }
  }

  .ma__comp-heading {
    padding-bottom: 0;

    &::after {
      background: none;
    }
  }

  & .ma__callout-link {
    border: none;
    display:flex;
    width: 100%;
    flex-flow: column wrap;
    justify-content: center;
    background: none;
    box-shadow: none;
    padding: 0;
  }
}