@layer components {
  .notification-form {
    max-width: 800px;
  }

  .notification-form lexxy-editor {
    --lexxy-editor-rows: 12lh;
    --lexxy-color-canvas: white;
    --lexxy-color-ink-lighter: var(--color-border);
    --lexxy-radius: var(--radius-md);
    --lexxy-focus-ring-color: rgba(37, 99, 235, 0.3);
  }

  .variables-section {
    background-color: var(--color-gray-50);
    margin-top: var(--spacing-lg);
  }

  .variables-section h3 {
    font-size: 0.875rem;
    margin-bottom: var(--spacing-sm);
  }

  .variables-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    list-style: none;
    padding: 0;
    margin: var(--spacing-md) 0 0 0;
  }

  .variables-list li {
    position: relative;
  }

  .variable-button {
    background-color: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .variable-button:hover {
    opacity: 80%;
  }

  .variables-list code {
    background: none;
    background-color: transparent;
    padding: 0;
    font-size: 0.8125rem;
    color: var(--color-primary);
  }

  .test-section {
    margin-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-xl);
  }

  .test-section h3 {
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
  }

  .form-inline {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-md);
    max-width: none;
  }

  .form-inline .form-group {
    margin-bottom: 0;
    flex: 1;
    max-width: 300px;
  }

  .form-inline .form-actions {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
}