@layer components {
  .divider {
    align-items: center;
    display: grid;

    button {
      grid-area: 1 / 1;
      margin-inline: auto;

      /* Makle sure the hover effect isn't clipped */
      .overflow-clip & {
        margin-block: var(--hover-size);
      }
    }

    &::after {
      --svg: url("/assets/wavy-black-e52514d0.svg");

      background-color: var(--color-theme-light);
      block-size: 10px;
      content: "";
      grid-area: 1 / 1;
      mask-image: var(--svg);
      z-index: -1;
    }
  }

  /* Separators */
  .separator {
    border-inline-start: 1px solid var(--color-ink-light);
    display: inline-flex;
    inline-size: 0;
  }
}