/*
 * The follow control.
 *
 * One form, four possible states, and the server decides which: follow, unfollow, request, cancel request.
 * `FollowService::buttonState()` supplies both the route and the button variant, so nothing about which
 * button this is gets decided here — CSS that chose the colour would be a second opinion about what the
 * control does, and the two opinions would eventually disagree (§64).
 *
 * So there is very little here on purpose. The button's appearance comes from `buttons.css` through the
 * variant class the server picked; this file only makes the form stop behaving like a block that owns a line
 * of its own, because it sits in a row of other controls on a profile header and in list rows.
 *
 * A visitor who is not signed in gets a link to the sign-in page shaped like the button they expected. That
 * is deliberate: a disabled follow button explains nothing, and "sign in to follow" is the actual next step.
 */

.follow-form {
    display: inline-flex;
    margin: 0;
}

/* The width is held steady across states so the row does not jog when "Follow" becomes "Following" — the
   words differ in length in every language, and the button is pressed and unpressed in place. */
.follow-form__button {
    min-width: 8rem;
    justify-content: center;
}

/* In flight: still there, still the same size, no longer inviting a second press. The script sets the
   attribute on the form, so a slow network cannot produce two follows from one intention. */
.follow-form[data-loading="true"] .follow-form__button {
    pointer-events: none;
    opacity: 0.6;
}

.follow-form__signin {
    min-width: 8rem;
    justify-content: center;
}