/* Floating social bar (left edge) and chat bubble (right edge) of the desktop mock; the phone mock has neither. */
@layer components {
  .social-links {
    display: flex;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .social-links__link {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    color: inherit;
  }

  a.social-links__link:hover { color: var(--noria-gold); }

  .social-links__icon { width: 1.375rem; height: 1.375rem; }

  .floating-social {
    position: fixed;
    left: 1.5rem;
    top: 50%;
    z-index: 40;
    flex-direction: column;
    translate: 0 -50%;
    color: var(--noria-gold);
  }

  .floating-social li:nth-child(2) { color: var(--noria-ink); }

  .floating-chat {
    position: fixed;
    right: 1.5rem;
    top: 50%;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--noria-green);
    translate: 0 -50%;

    span { width: 0.29rem; height: 0.29rem; border-radius: 50%; background: var(--noria-sand); }
  }

  @media (max-width: 79.99rem) {
    .floating-social, .floating-chat { display: none; }
  }
}