.euiToast {
  border: $euiBorderThin;
  // This overwrites some of the border above
  // sass-lint:disable-block mixins-before-declarations
  @include euiBottomShadowLarge($adjustBorders: true);

  position: relative;
  padding: $euiSize;
  background-color: $euiColorEmptyShade;
  width: 100%;

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

/**
  * 1. Fit button to icon.
  */
.euiToast__closeButton {
  position: absolute;
  top: $euiSize;
  right: $euiSize;
  line-height: 0; /* 1 */
  appearance: none;
  opacity: 0;
  transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance;

  svg {
    fill: tintOrShade($euiTitleColor, 50%, 70%);
  }

  &:hover {
    svg {
      fill: $euiTitleColor;
    }
  }

  &:focus {
    background-color: $euiFocusBackgroundColor;
    opacity: 1;

    svg {
      fill: $euiColorPrimary;
    }
  }
}

// Modifier naming and colors.
$euiToastTypes: (
  primary: makeGraphicContrastColor($euiColorPrimary, $euiColorEmptyShade),
  success: makeGraphicContrastColor($euiColorSecondary, $euiColorEmptyShade),
  warning: makeGraphicContrastColor($euiColorWarning, $euiColorEmptyShade),
  danger: makeGraphicContrastColor($euiColorDanger, $euiColorEmptyShade),
);

// Create button modifiers based upon the map.
@each $name, $color in $euiToastTypes {
  .euiToast--#{$name} {
    border-top: 2px solid $color;
  }
}

/**
 * 1. Align icon with first line of title text if it wraps.
 * 2. Apply margin to all but last item in the flex.
 * 3. Account for close button.
 */
.euiToastHeader {
  padding-right: $euiSizeL; /* 3 */
  display: flex;
  align-items: baseline; /* 1 */

  > * + * {
    margin-left: $euiSizeS; /* 2 */
  }
}

/**
  * 1. Vertically center icon with first line of title.
  */
.euiToastHeader__icon {
  flex: 0 0 auto;
  fill: $euiTitleColor;
  transform: translateY(2px); /* 1 */
}

.euiToastHeader__title {
  @include euiTitle('xs');
  @include euiTextBreakWord;
  font-weight: $euiFontWeightLight;
}

.euiToastHeader--withBody {
  margin-bottom: $euiSizeS;
}

/**
 * 1. Prevent long lines from overflowing.
 */
.euiToastBody {
  word-wrap: break-word; /* 1 */
}