/* Posting form: sections, fields, unfurl status. */

@layer components {
  .post__title {
    font-size: var(--text-x-large);
    font-weight: 700;
  }

  .post__sub {
    margin-block: 0.375rem 1rem;
    font-size: var(--text-small);
    color: var(--color-text-subtle);
  }

  /* Spacing hierarchy: tight inside a field (label/input/hint), roomier within a
     section, roomiest between sections (which a divider line separates). */
  .deal-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  #deal_fields {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .post__preview {
    inline-size: 6rem;
    block-size: 6rem;
    object-fit: contain;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-canvas);
  }

  .unfurl-status {
    padding: 0.5rem var(--inline-space);
    border-radius: var(--radius-sm);
    font-size: var(--text-x-small);
    background: var(--color-surface-sunken);
    color: var(--color-text-subtle);
  }

  /* The idle banner is redundant with the section description; only show a live
     status (loading/ok/manual/rate_limited) once a link is being read. */
  .unfurl-status--blank {
    display: none;
  }

  .unfurl-status--loading {
    display: flex;
    align-items: center;
    gap: 0.75ch;

    &::before {
      content: "";
      flex: none;
      inline-size: 0.75rem;
      block-size: 0.75rem;
      border: 2px solid var(--tint-ink-20);
      border-block-start-color: var(--color-primary);
      border-radius: 50%;
      animation: unfurl-spin 0.6s linear infinite;
    }
  }

  @keyframes unfurl-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .unfurl-status--loading::before {
      animation: none;
    }
  }

  .unfurl-status--ok {
    background: var(--color-up-surface);
    color: var(--color-up);
  }

  .unfurl-status--manual,
  .unfurl-status--rate_limited,
  .unfurl-status--out-of-stock {
    background: var(--color-down-surface);
    color: var(--color-down);
  }
}