@layer components {
  /* Floating action button */
  .fab {
    align-items: center;
    background-color: var(--color-positive);
    border-radius: 99rem;
    bottom: 1.5rem;
    box-shadow: var(--shadow-lg);
    color: var(--color-ink-inverted);
    display: flex;
    font-weight: 700;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    position: fixed;
    right: 1.5rem;
    z-index: 50;

    &:hover {
      filter: brightness(1.1);
    }

    .icon {
      block-size: 1.25rem;
      inline-size: 1.25rem;
    }
  }
}