/*
 * The Follow button in the company chrome (shared/_follow_button), and what
 * sits beside it at the limit. The buttons are `button_classes`; this lays
 * them out and swaps "Following ✓" for "Unfollow" under the pointer and the
 * keyboard, so the way out is named before it is taken.
 *
 * Signed out, the button is a <details> summary set as the same button, and
 * what it opens is a small card with the one-field signup form in it.
 */
@layer components {
  .follow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
  }

  .follow__form {
    display: contents;
  }

  .follow__unfollow {
    display: none;
  }

  .follow__button--following:is(:hover, :focus-visible) {
    & .follow__label {
      display: none;
    }

    & .follow__unfollow {
      display: inline;
    }
  }

  .follow__signup {
    position: relative;
  }

  .follow__summary {
    list-style: none;

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

  .follow__signup-form {
    display: grid;
    gap: var(--space-2xs);
    inline-size: min(22rem, 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);

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

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