/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

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

  position: relative;
  padding: $ouiSize;
  background-color: $ouiColorEmptyShade;
  width: 100%;

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

/**
  * 1. Fit button to icon.
  */
.ouiToast__closeButton {
  position: absolute;
  top: $ouiSize;
  right: $ouiSize;
  line-height: 0; /* 1 */
  appearance: none;
  opacity: 0;
  transition: opacity $ouiAnimSpeedFast $ouiAnimSlightResistance;

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

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

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

    svg {
      fill: $ouiColorPrimary;
    }
  }
}

// Modifier naming and colors.
$ouiToastTypes: (
  primary: makeGraphicContrastColor($ouiColorPrimary, $ouiColorEmptyShade),
  success: makeGraphicContrastColor($ouiColorSecondary, $ouiColorEmptyShade),
  warning: makeGraphicContrastColor($ouiColorWarning, $ouiColorEmptyShade),
  danger: makeGraphicContrastColor($ouiColorDanger, $ouiColorEmptyShade),
);

// Create button modifiers based upon the map.
@each $name, $color in $ouiToastTypes {
  .ouiToast--#{$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.
 */
.ouiToastHeader {
  padding-right: $ouiSizeL; /* 3 */
  display: flex;
  align-items: baseline; /* 1 */

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

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

.ouiToastHeader__title {
  @include ouiTitle('xs');
  @include ouiTextBreakWord;
  font-weight: $ouiFontWeightLight;
}

.ouiToastHeader--withBody {
  margin-bottom: $ouiSizeS;
}

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


/* OUI -> EUI Aliases */
$euiToastTypes: $ouiToastTypes;
/* End of Aliases */