/* SocialLinks: the "redes" button and its popover. Placed under the button with anchor positioning;
   without it the list rises from the bottom of the screen as a sheet, which suits a phone anyway.
   Without the Popover API the list simply shows under the button. */
@layer components {
  .social-links__list {
    --focus-ring: 2px solid var(--color-text-reversed);

    margin: 0;
    padding: var(--block-space-half);
    list-style: none;
    background: var(--color-link);
    border: 0;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-large);

    & a {
      display: flex;
      align-items: center;
      min-block-size: var(--touch-target);
      padding-inline: var(--inline-space-double);
      font-weight: 600;
      color: var(--color-text-reversed);
      text-decoration: none;
      border-radius: var(--radius);

      &:hover, &:focus-visible { background: oklch(var(--lch-text-reversed) / 0.16); }
    }

    /* AdHoc's reveal: a 150 ms fade, in and out. */
    &[popover] {
      transition:
        opacity var(--duration-press) var(--ease-press),
        display var(--duration-press) allow-discrete,
        overlay var(--duration-press) allow-discrete;

      &:not(:popover-open) { opacity: 0; }

      @starting-style { opacity: 0; }
    }
  }

  @supports (anchor-name: --a) {
    .social-links__list[popover] {
      inset: auto;
      margin-block-start: var(--block-space-half);
      min-inline-size: 10rem;
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-block, flip-inline;
    }
  }

  @supports not (anchor-name: --a) {
    .social-links__list[popover] {
      inset: auto 0 0;
      inline-size: 100%;
      max-inline-size: none;
      margin: 0;
      padding-block-end: max(var(--block-space), env(safe-area-inset-bottom));
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }
  }
}