/*
 * 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.
 */
@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;
    }
  }
}