@import 'vars';
@import '~react-toastify/dist/ReactToastify.css';

.Toastify {
  .Toastify__toast-container {
    left: base(5);
    transform: none;
    right: base(5);
    width: auto;
  }

  .Toastify__toast {
    padding: base(.5);
    border-radius: $style-radius-m;
    font-weight: 600;
  }

  .Toastify__close-button {
    align-self: center;
  }

  .Toastify__toast--success {
    color: $color-dark-gray;
  }

  .Toastify__close-button--success {
    color: $color-dark-gray;
  }

  .Toastify__toast--success {
    background: $color-green;
  }

  .Toastify__toast--error {
    background: $color-red;
  }

  @include mid-break {
    .Toastify__toast-container {
      left: $baseline;
      right: $baseline;
    }
  }
}
