/*
 * 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. Both labels share one
 * grid cell and only their visibility changes, so the button keeps the width
 * of the wider one and does not jump under the pointer.
 *
 * 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__button--following {
    display: inline-grid;
    place-items: center;

    & > * {
      grid-area: 1 / 1;
    }
  }

  .follow__unfollow {
    visibility: hidden;
  }

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

    & .follow__unfollow {
      visibility: visible;
    }
  }

  .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-ink);
    border-radius: var(--radius-lg);
    background-color: var(--color-field);
    box-shadow: var(--shadow-overlay);

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

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