// Allows for centering flash message for short and long, wrapped messages
.flash-message-container {
  @include position(fixed);
  top: 80px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: $pad-small;
  justify-content: center;
  align-items: center;
  z-index: 999;
  pointer-events: none;
}

.flash-message {
  display: flex;
  align-items: center;
  justify-content: center;
  // Use static (un-themed) white: the flash toast is always a colored
  // surface, so foreground should stay light regardless of dark mode.
  color: $static-white;
  padding: $pad-small $pad-medium;
  z-index: 999;
  background-color: $core-vibrant-blue;
  border: 1px solid $ui-fleet-black-10;
  box-sizing: border-box;
  box-shadow: 0px 7px 3px -5px rgba(25, 33, 71, 0.1);
  border-radius: 8px;
  max-width: calc(100% - 64px); // Same horizontal margin as .main-content
  pointer-events: auto;

  &--success {
    background-color: $ui-success;
  }

  &--error {
    background-color: $ui-error;
  }

  &--warning-filled {
    background-color: $ui-warning;
    // Yellow is light enough that foreground should be dark in BOTH modes.
    // Use static (un-themed) tokens so dark mode doesn't flip to light text.
    color: $static-black;

    span {
      margin-left: 15px;
      margin-right: 15px;
      font-size: $x-small;
      color: $static-black;
    }

    .flash-message__remove .fleeticon,
    .flash-message__remove .fleeticon:hover {
      color: $static-black;
    }

    .flash-message__undo {
      color: $static-black;
    }
  }

  &__content {
    display: flex;
    align-items: center;

    span {
      margin-left: 15px;
      margin-right: 15px;
      font-size: $x-small;
    }

    .fleeticon {
      font-size: $small;
    }

    img {
      width: 16px;
      height: 16px;
    }

    a {
      color: inherit;
    }
  }

  &__undo {
    color: $static-white;
    cursor: pointer;
    font-size: $small;
    text-decoration: underline;
    text-transform: uppercase;
    margin-right: 15px;
  }

  &__remove {
    height: auto;
    cursor: pointer;

    .fleeticon {
      transition: color 150ms ease-in-out;
      color: $static-white;
      font-size: $small;

      &:hover {
        color: $static-white;
      }
    }
  }

  &__ex {
    text-decoration: none;

    button {
      display: flex;
      align-items: center;
    }
  }
}