@import "../settings/variables";

.toast {
  align-items: center;
  border-radius: 4px;
  box-shadow: $toast-box-shadow;
  color: $toast-text-color;
  display: flex;
  font-size: $toast-font-size;
  min-height: 48px;
  padding: spacing(md) spacing(xl);
  width: 550px;

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

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

  &__icon {
    display: inline-flex;

    :global .ci {
      font-size: 24px;
    }
  }

  &__label {
    font-weight: bold;
    margin-left: 16px;
    overflow: hidden;
  }
}