@use 'variables' as *;
@use 'mixins' as *;

// Toast container
.Toastify__toast-container {
  width: auto !important;
  padding: 16px !important;
}

// Main toast styling with glassmorphism effect
.Toastify__toast {
  @include themed() {
    background: t($background) !important;
    color: t($color) !important;
    box-shadow: t($boxShadow), 0 8px 32px rgb(0 0 0 / 20%) !important;
  }

  border-radius: $borderRadius !important;
  -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
  backdrop-filter: blur(15px) saturate(180%) !important;
  padding: 16px 20px !important;
  min-height: 64px !important;
  width: auto !important;
  min-width: 300px !important;
  max-width: 500px !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
  transition: all 0.3s ease !important;

  &:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 0 0 1px #484848, 0 12px 40px rgb(0 0 0 / 30%) !important;
  }
}

// Toast body
.Toastify__toast-body {
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  margin: 0 !important;

  @include themed() {
    color: t($color) !important;
  }
}

// Close button
.Toastify__close-button {
  @include themed() {
    color: t($color) !important;
    opacity: 0.6 !important;
  }

  align-self: center !important;
  transition: all 0.2s ease !important;

  &:hover {
    opacity: 1 !important;
  }
}

// Progress bar base styling
.Toastify__progress-bar {
  height: 4px !important;
  border-radius: 0 0 $borderRadius $borderRadius !important;

  &--default,
  &--info {
    @include themed() {
      background: linear-gradient(90deg, t($link) 0%, #dd3b67 100%) !important;
    }
  }

  &--success {
    background: linear-gradient(90deg, rgb(46 213 115) 0%, rgb(26 188 156) 100%) !important;
  }

  &--warning {
    background: linear-gradient(90deg, #ffb032 0%, #ff9500 100%) !important;
  }

  &--error {
    background: linear-gradient(90deg, rgb(255 71 87) 0%, #dd3b67 100%) !important;
  }
}

// Toast type variants - all use the base glassmorphism style
.Toastify__toast--default,
.Toastify__toast--info,
.Toastify__toast--success,
.Toastify__toast--warning,
.Toastify__toast--error {
  @include themed() {
    background: t($background) !important;
    color: t($color) !important;
  }
}
