@layer components {
  /* The strips under the main navigation, stacked: a deletion counting down
     (`layouts/shared/deletion_bars`), then the user's inline bar
     notifications (see `Users::Notification`), a cross on those they may
     close. */
  .notice-bar {
    align-items: center;
    background: var(--color-warning-tint);
    border-block-end: 1px solid var(--color-warning-border);
    color: var(--color-warning);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.875rem;
    gap: 0.75rem;
    justify-content: center;
    padding: 0.5rem 1rem;
    text-align: center;
  }

  /* A deletion counting down: red, and nobody may close it. */
  .notice-bar--negative {
    background: var(--color-negative-tint);
    border-block-end-color: var(--color-negative-border);
    color: var(--color-negative-strong);
    font-weight: 600;
  }

  /* Room at the end for the cross, so the centred text never runs under it. */
  .notice-bar--dismissible {
    padding-inline: 3rem;
    position: relative;
  }

  .notice-bar__dismiss-form {
    inset-block-start: 50%;
    inset-inline-end: 0.5rem;
    position: absolute;
    transform: translateY(-50%);
  }

  .notice-bar__dismiss {
    color: var(--color-warning);
  }

  .notice-bar__link {
    background: none;
    border: none;
    color: var(--color-brand);
    font-weight: 600;
    padding: 0;
  }

  /* A link that posts — to Stripe's portal — sits in the line like one. */
  .notice-bar__action-form {
    display: inline-flex;
  }
}