@mixin toasts {

  .wcToasts {
    position: absolute;
    top: 20px;
    left: 5px;
    right: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .wcToast {
      pointer-events: auto;
      min-width: 250px;
      margin-bottom: 12px;
      padding: 12px 25px;
      box-shadow: 0 0 3px rgba(0,0,0,.16);
      border-radius: 5px;
      border: 1px solid #d7d7d7;
      cursor: pointer;

      &.wcToastError {
        border: 1px solid rgba(255, 197, 197, 0.9);
        &:hover {
          border: 1px solid rgba(255, 197, 197, 1);
        }
      }
      &.wcToastInfo {
        border: 1px solid rgba(178, 226, 152, 0.9);
        &:hover {
          border: 1px solid rgba(178, 226, 152, 1);
        }
      }
    }
  }
}