// =============================================================================
// NOTIFICATIONS - Alt Audit Plugin
// Toast-style notifications for user feedback
// =============================================================================

@use '../abstracts/variables' as *;

// Notification container - positioned fixed at top right
.alt-audit-notifications {
  position: fixed;
  top: 50px; // Below WordPress admin bar
  right: 20px;
  z-index: map-get($z-index, toast);
  display: flex;
  flex-direction: column;
  gap: $space-3;
  max-width: 420px;
  width: 100%;
  pointer-events: none;

  @media screen and (max-width: 782px) {
    top: 76px; // Adjust for mobile admin bar
    right: 10px;
    left: 10px;
    max-width: none;
  }
}

// Individual notification
.alt-audit-notification {
  display: flex;
  align-items: flex-start;
  gap: $space-3;
  padding: $space-4 $space-5;
  background: $color-surface;
  border-radius: $radius-apple-md;
  box-shadow: $shadow-apple-lg;
  border-left: 4px solid $color-gray-400;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;

  // Slide in animation
  &.alt-audit-notification-show {
    opacity: 1;
    transform: translateX(0);
  }

  // Icon styles
  .notification-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    &::before {
      font-family: dashicons;
      font-size: 14px;
      line-height: 1;
    }
  }

  // Message styles
  .notification-message {
    flex: 1;
    font-family: $font-secondary;
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
    line-height: $line-height-normal;
    color: $color-gray-800;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  // Dismiss button
  .notification-dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: $space-1;
    margin: -#{$space-1};
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease;
    border-radius: $radius-apple-sm;

    &:hover {
      opacity: 1;
      background: rgba(0, 0, 0, 0.05);
    }

    &:focus {
      outline: none;
      box-shadow: 0 0 0 2px $color-primary-light;
    }

    .dashicons {
      font-size: 18px;
      width: 18px;
      height: 18px;
      color: $color-gray-600;
    }
  }
}

// Success notification
.alt-audit-notification-success {
  border-left-color: $color-success;
  background: linear-gradient(to right, rgba($color-success, 0.08), $color-surface);

  .notification-icon {
    background: rgba($color-success, 0.15);
    color: $color-success;

    &::before {
      content: '\f147'; // dashicons-yes
    }
  }

  .notification-message {
    color: darken($color-success, 15%);
  }
}

// Error notification
.alt-audit-notification-error {
  border-left-color: $color-error;
  background: linear-gradient(to right, rgba($color-error, 0.08), $color-surface);

  .notification-icon {
    background: rgba($color-error, 0.15);
    color: $color-error;

    &::before {
      content: '\f158'; // dashicons-no
    }
  }

  .notification-message {
    color: darken($color-error, 10%);
  }
}

// Warning notification
.alt-audit-notification-warning {
  border-left-color: $color-warning;
  background: linear-gradient(to right, rgba($color-warning, 0.08), $color-surface);

  .notification-icon {
    background: rgba($color-warning, 0.15);
    color: $color-warning-dark;

    &::before {
      content: '\f227'; // dashicons-warning
    }
  }

  .notification-message {
    color: darken($color-warning, 20%);
  }
}

// Info notification
.alt-audit-notification-info {
  border-left-color: $color-info;
  background: linear-gradient(to right, rgba($color-info, 0.08), $color-surface);

  .notification-icon {
    background: rgba($color-info, 0.15);
    color: $color-info-dark;

    &::before {
      content: '\f348'; // dashicons-info
    }
  }

  .notification-message {
    color: darken($color-info, 25%);
  }
}