/* ==========================================================================
   MOLECULES / toast / toast.css
   --------------------------------------------------------------------------
   Toast muncul via JS: toast.show({ message, type, duration })
   CSS ini hanya visual. Semua posisi & stack dikelola JS.
   ========================================================================== */

/* Container — posisi fixed di edge layar */
.toast-container {
  position:       fixed;
  z-index:        var(--z-toast);
  display:        flex;
  flex-direction: column;
  gap:            var(--size-300);
  pointer-events: none;
  max-width:      min(360px, calc(100vw - var(--size-800)));
}

/* Positions */
.toast-container-top-right    { top: var(--size-600); right: var(--size-600); align-items: flex-end; }
.toast-container-top-left     { top: var(--size-600); left:  var(--size-600); align-items: flex-start; }
.toast-container-top-center   { top: var(--size-600); left: 50%; transform: translateX(-50%); align-items: center; }
.toast-container-bottom-right { bottom: var(--size-600); right: var(--size-600); align-items: flex-end; flex-direction: column-reverse; }
.toast-container-bottom-left  { bottom: var(--size-600); left:  var(--size-600); align-items: flex-start; flex-direction: column-reverse; }
.toast-container-bottom-center{ bottom: var(--size-600); left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }

/* Individual toast */
.toast {
  display:          flex;
  align-items:      flex-start;
  gap:              var(--size-300);
  padding:          var(--size-300) var(--size-400);
  background-color: var(--color-bg-elevated);
  border:           1px solid var(--color-border-default);
  border-radius:    var(--radius-lg);
  box-shadow:       var(--shadow-xl);
  pointer-events:   all;
  max-width:        100%;
  min-width:        260px;

  animation: ds-slide-up var(--duration-moderate) var(--ease-spring) both;
}

.toast.is-hiding {
  animation: ds-fade-out var(--duration-normal) var(--ease-in) both;
}

/* Icon */
.toast-icon {
  flex-shrink: 0;
  width:       var(--size-icon-md);
  height:      var(--size-icon-md);
  margin-top:  2px;
}

/* Body */
.toast-body  { flex: 1; min-width: 0; }

.toast-title {
  font-size:   var(--text-label-size);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text-primary);
  margin:      0;
  line-height: var(--leading-snug);
}

.toast-message {
  font-size:  var(--text-body-sm-size);
  color:      var(--color-text-secondary);
  margin:     var(--size-50) 0 0;
  line-height: var(--leading-normal);
}

/* Close */
.toast-close {
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           var(--size-700);
  height:          var(--size-700);
  background:      none;
  border:          none;
  border-radius:   var(--radius-sm);
  cursor:          pointer;
  color:           var(--color-text-disabled);
  padding:         0;
  transition:      var(--transition-base);
}
.toast-close:hover { color: var(--color-text-secondary); background: var(--color-bg-sunken); }

/* Progress bar */
.toast-progress {
  position:         absolute;
  bottom:           0;
  left:             0;
  height:           3px;
  background-color: var(--color-brand);
  border-radius:    0 0 var(--radius-lg) var(--radius-lg);
  transform-origin: left;
}

.toast { position: relative; overflow: hidden; }

/* Variants */
.toast-success .toast-icon { color: var(--color-success); }
.toast-warning .toast-icon { color: var(--color-warning); }
.toast-error   .toast-icon { color: var(--color-error); }
.toast-info    .toast-icon { color: var(--color-info); }

.toast-success .toast-progress { background: var(--color-success); }
.toast-warning .toast-progress { background: var(--color-warning); }
.toast-error   .toast-progress { background: var(--color-error); }