// Colors
$wc-error-bg: linear-gradient(135deg, #ff6b6b, #ff4757);
$wc-error-bar: #c0392b;

$wc-success-bg: linear-gradient(135deg, #2ed573, #1abc9c);
$wc-success-bar: #0f9d58;

$wc-info-bg: linear-gradient(135deg, #1e90ff, #3742fa);
$wc-info-bar: #1b3cff;

$radius: 14px;
$shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
$padding: 18px 22px;

// Wrapper
.woocommerce-notices-wrapper {
  position: fixed;
  top: 22px;
  right: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 99999;
}

// Base Toast
.wc-toast {
  display: flex;
  align-items: self-start;
  gap: 14px;
  padding: $padding;
  border-radius: $radius;
  color: white;
  box-shadow: $shadow;
  min-width: 320px;
  max-width: 380px;
  overflow: hidden;
  animation: toastIn 0.35s ease forwards;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    border-radius: $radius 0 0 $radius;
  }

  ul {
    padding: 0;
    margin: 0;
    list-style: none;

    li {
      margin: 4px 0;
    }
  }

  .wc-toast-close {
    margin-left: auto;
    cursor: pointer;
    opacity: 0.7;
    transition: 0.2s;
    font-size: 20px;

    &:hover {
      opacity: 1;
      transform: scale(1.1);
    }
  }
}

// Variants
.woocommerce-error {
  @extend .wc-toast;
  background: $wc-error-bg;
  &::before { background: $wc-error-bar; }
}

.woocommerce-message {
  @extend .wc-toast;
  background: $wc-success-bg;
  &::before { background: $wc-success-bar; }
}

.woocommerce-info {
  @extend .wc-toast;
  background: $wc-info-bg;
  &::before { background: $wc-info-bar; }
}

// Animations
@keyframes toastIn {
  0% { transform: translateX(100%) scale(0.95); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes toastOut {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: translateX(100%) scale(0.9); }
}