#toast-container {
  .toast {
    padding: 1.25rem 2.75rem 1.25rem 1.25rem;
    background-color: white !important;
    border-radius: var(--leap-border-radius) !important;
    border: 1px solid #ebebeb;
    margin-bottom: 0;
    box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.10) !important;
    transition: box-shadow 0.15s ease-in-out;

    @media screen and (min-width: 768px) {
      width: 20rem;
    }

    &:hover {
      box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.18) !important;
      transition: box-shadow 0.15s ease-in-out;
    }

    > .toast-title {
      text-transform: none;
      font-weight: 600;
      font-size: 1rem;
      margin-bottom: 0.25rem;
    }

    &.toast-success {
      >.toast-title {
        color: $primary;
      }
      >.toast-close-button {
        background-color: $primary;
        color: #fff;
        &:hover {
          background-color: darken($primary, 5%);
        }
      }
    }

    &.toast-error {
      color: $danger !important;
      >.toast-close-button {
        background-color: $danger;
        color: #fff;

        &:hover {
          background-color: darken($danger, 5%);
        }
      }
    }

    .toast-message {
      max-width: 12.5rem;
      min-width: 12.5rem;
      color: var(--leap-body-text-color) !important;
    }

    button.toast-close-button {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background-color: #f7f7f7;
      color: var(--leap-label-color);
      border-radius: var(--leap-border-radius);
      border: none;
      font-size: 1.4rem !important;
      font-weight: normal;
      line-height: 1;
      padding: 0.0625rem 0.375rem !important;
      transition: all .15s ease-in-out;
      opacity: 1;

      &:hover {
        transition: all .15s ease-in-out;
        opacity: 1;
      }
    }
  }
}