@import 'variables/shadows';

.toast {
  position: relative;
  display: flex;
  align-items: stretch;
  background-color: var(--digi--ui--color--informative);
  border: 2px solid var(--digi--ui--color--informative);
  box-shadow: $msfa__shadow;
  pointer-events: auto;
  color: var(--digi--typography--color--text);
  font-size: 1rem;

  &--high {
    background-color: var(--digi--ui--color--danger);
    border-color: var(--digi--ui--color--danger);
  }

  &--medium {
    background-color: var(--digi--ui--color--warning);
    border-color: var(--digi--ui--color--warning);
  }

  &__icon-wrapper {
    display: flex;
    align-items: center;
    padding: var(--digi--layout--gutter);
    color: var(--digi--typography--color--text--light);
    font-size: 2rem;

    .toast--medium & {
      color: var(--digi--typography--color--text);
    }
  }

  &__content {
    display: flex;
    width: 100%;
    background-color: var(--digi--ui--color--background);
    flex-direction: column;
    justify-content: center;
    padding: var(--digi--layout--gutter--s);
  }

  &__heading {
    margin: 0;
  }

  &__message {
    max-width: 400px !important;
    margin: 0;
    overflow-wrap: break-word;
  }

  &__close-button {
    background-color: transparent;
    border-width: 0;
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--digi--layout--gutter--s);
    color: var(--digi--typography--color--text);
  }
}
