@layer atoms {
  /* Toaster container positioning (keep Sonner's positioning logic) */
  [data-sonner-toaster] {
    font-family: var(--font-family);
  }

  /* Base toast styles */
  .mobius-toast {
    position: relative;
    font-family: var(--font-family);
    font-size: var(--font-size-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-background);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-1);
    box-shadow: var(--shadow-md);
    padding: var(--size-md);
    display: flex;
    align-items: flex-start;
    gap: var(--size-sm);
    width: var(--toast-width);
    max-width: calc(100vw - var(--size-lg) * 2);
    box-sizing: border-box;
  }

  /* Variant styles */
  .mobius-toast.--info {
    border-color: var(--color-info);
    background-color: var(--color-info-background);
  }

  .mobius-toast.--success {
    border-color: var(--color-valid);
    background-color: var(--color-valid-background);
  }

  .mobius-toast.--warning {
    border-color: var(--color-warning);
    background-color: var(--color-warning-background);
  }

  .mobius-toast.--error {
    border-color: var(--color-error);
    background-color: var(--color-error-background);
  }

  /* Icon */
  .mobius-toast__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-top: 2px;
  }

  .mobius-toast__icon .mobius-icon {
    width: 1.25em;
    height: 1.25em;
  }

  /* Body wrapper for content + actions */
  .mobius-toast__body {
    display: flex;
    flex-direction: column;
    gap: var(--size-sm);
    flex: 1;
    min-width: 0;
    padding-right: var(--size-lg);
  }

  /* Content wrapper (title + description) */
  .mobius-toast__content {
    display: flex;
    flex-direction: column;
    gap: var(--size-xxs);
  }

  /* Title */
  .mobius-toast__title {
    font-size: var(--font-size-regular);
    font-weight: 600;
    line-height: var(--line-height-normal);
    color: var(--color-text);
    margin: 0;
  }

  /* Description */
  .mobius-toast__description {
    font-size: var(--font-size-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    margin: 0;
  }

  /* Actions wrapper - separate row for buttons */
  .mobius-toast__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--size-xs);
    flex-wrap: wrap;
  }

  /* Shared button styles */
  .mobius-toast__action,
  .mobius-toast__cancel {
    font-family: var(--font-family);
    font-size: var(--font-size-small);
    font-weight: 600;
    padding: var(--size-xs) var(--size-sm);
    border-radius: var(--radius-1);
    cursor: pointer;
    transition: background-color 0.15s ease;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Action button (primary) */
  .mobius-toast__action {
    background-color: var(--button-primary-color);
    color: var(--button-primary-content-color);
    border: none;
  }

  .mobius-toast__action:hover {
    filter: brightness(0.9);
  }

  /* Action button variant colors */
  .mobius-toast.--info .mobius-toast__action {
    background-color: var(--color-info);
  }

  .mobius-toast.--success .mobius-toast__action {
    background-color: var(--color-valid);
  }

  .mobius-toast.--warning .mobius-toast__action {
    background-color: var(--color-warning);
  }

  .mobius-toast.--error .mobius-toast__action {
    background-color: var(--color-error);
  }

  /* Cancel button (secondary) */
  .mobius-toast__cancel {
    background-color: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
  }

  .mobius-toast__cancel:hover {
    background-color: var(--color-background-hover);
  }

  /* Cancel button variant border colors */
  .mobius-toast.--info .mobius-toast__cancel {
    border-color: var(--color-info);
    color: var(--color-info);
  }

  .mobius-toast.--success .mobius-toast__cancel {
    border-color: var(--color-valid);
    color: var(--color-valid);
  }

  .mobius-toast.--warning .mobius-toast__cancel {
    border-color: var(--color-warning);
    color: var(--color-warning);
  }

  .mobius-toast.--error .mobius-toast__cancel {
    border-color: var(--color-error);
    color: var(--color-error);
  }

  /* Close button */
  .mobius-toast__close {
    position: absolute;
    top: var(--size-md);
    right: var(--size-sm);
    background: transparent;
    border: none;
    border-radius: var(--radius-1);
    cursor: pointer;
    padding: var(--size-xxs);
    width: var(--size-md);
    height: var(--size-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: color 0.15s ease;
  }

  .mobius-toast__close:hover {
    color: var(--color-text);
  }

  /* Close icon */
  .mobius-toast__close-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobius-toast__close-icon .mobius-icon {
    width: 1.25em;
    height: 1.25em;
  }

  /* Close button variant colors */
  .mobius-toast.--info .mobius-toast__close {
    color: var(--color-info);
  }

  .mobius-toast.--success .mobius-toast__close {
    color: var(--color-valid);
  }

  .mobius-toast.--warning .mobius-toast__close {
    color: var(--color-warning);
  }

  .mobius-toast.--error .mobius-toast__close {
    color: var(--color-error);
  }

  /* Close button hover - darken slightly */
  .mobius-toast .mobius-toast__close:hover {
    filter: brightness(0.8);
  }
}
