.euiHeaderAlert {
  min-width: 300px;
  position: relative;
  margin-bottom: $euiSizeL;
  padding: 0 $euiSizeS $euiSizeL;
  border-bottom: $euiBorderThin;
  border-top: none;

  .euiHeaderAlert__dismiss {
    opacity: 0;
    position: absolute;
    right: $euiSize - 4px;
    top: $euiSize - 4px;
    transition: opacity $euiAnimSpeedNormal ease-in;
  }

  &:hover .euiHeaderAlert__dismiss,
  .euiHeaderAlert__dismiss:focus {
    opacity: 1;
  }

  .euiHeaderAlert__title {
    @include euiTitle('xs');
    margin-bottom: $euiSizeS;
  }

  .euiHeaderAlert__text {
    @include euiFontSizeS;
    margin-bottom: $euiSize;
  }

  .euiHeaderAlert__action {
    @include euiFontSizeS;
  }

  .euiHeaderAlert__date {
    @include euiFontSizeXS;
    color: $euiColorDarkShade;
  }
}