/*
 * "Alert me" (shared/_alert_button) and the panel it opens
 * (frames/alerts/new; tasks/growth/milestones/13, D11): a <details> summary
 * set as a small secondary button, and under it a card with the kinds as a
 * wrapping segmented row, the kind's fields and "Set alert" — the same card
 * the Follow button's signup form opens (components/follow-button.css).
 */
@layer components {
  .alert-button {
    position: relative;
  }

  .alert-button__summary {
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }
  }

  .alert-panel {
    display: block;
    inline-size: min(24rem, calc(100vw - 2 * var(--space-md)));
    margin-block-start: var(--space-xs);
    padding: var(--space-md);
    border: var(--rule-width) solid var(--color-rule);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-overlay);
  }

  .alert-panel__kinds {
    flex-wrap: wrap;
    margin-block-end: var(--space-sm);
  }

  .alert-panel__note {
    margin: 0 0 var(--space-xs);
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }

  .alert-panel__error {
    margin: 0;
    color: var(--color-loss);
    font-size: var(--text-ui-sm);
  }

  .alert-form {
    display: grid;
    gap: var(--space-xs);

    & .button {
      justify-self: start;
    }
  }

  .alert-form__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
    margin: 0;
    padding: 0;
    border: 0;

    & .field__input {
      inline-size: auto;
    }
  }

  .alert-form__label {
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }
}