/* ==========================================================================

NOTICE TEXT BLOCKS
========================================================================== */

/**

*  Default Kramdown usage (no indents!):
*  <div class="notice" markdown="1">
*  #### Headline for the Notice
*  Text for the notice
*  </div>
*/

@mixin notice($notice-color) {

margin: 2em 0 !important;  /* override*/
padding: 1em;
color: $text-color;
font-family: $global-font-family;
font-size: $type-size-6 !important;
text-indent: initial; /* override*/
background-color: mix($background-color, $notice-color, $notice-background-mix);
border-radius: $border-radius;
box-shadow: 0 1px 1px rgba($notice-color, 0.25);

h4 {
  margin-top: 0 !important; /* override*/
  margin-bottom: 0.75em;
  line-height: inherit;
}

@at-root .page__content #{&} h4 {
  /* using at-root to override .page-content h4 font size*/
  margin-bottom: 0;
  font-size: 1em;
}

p {
  &:last-child {
    margin-bottom: 0 !important; /* override*/
  }
}

h4 + p {
  /* remove space above paragraphs that appear directly after notice headline*/
  margin-top: 0;
  padding-top: 0;
}

a {
  color: mix(#000, $notice-color, 10%);

  &:hover {
    color: mix(#000, $notice-color, 50%);
  }
}

code {
  background-color: mix($background-color, $notice-color, $code-notice-background-mix)
}

      pre code {
              background-color: inherit;
      }

ul {
  &:last-child {
    margin-bottom: 0; /* override*/
  }
}

}

/* Default notice */

.notice {

@include notice($light-gray);

}

/* Primary notice */

.notice–primary {

@include notice($primary-color);

}

/* Info notice */

.notice–info {

@include notice($info-color);

}

/* Warning notice */

.notice–warning {

@include notice($warning-color);

}

/* Success notice */

.notice–success {

@include notice($success-color);

}

/* Danger notice */

.notice–danger {

@include notice($danger-color);

}