@layer components {
  .signin-link {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff2;
    padding-inline: 1rem;
    text-decoration: none;
    &:link,
    &:visited,
    &:hover,
    &:active {
      color: white;
    }
    &:hover {
      background-color: #fff3;
    }
  }

  .widget {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    border: 1px solid #ccc;
    border-radius: 1rem;
    background-color: #fff;
    padding: 1rem;
    section {
      display: flex;
      gap: var(--spacing);
    }
  }

  @supports (corner-shape: squircle) {
    .widget {
      corner-shape: squircle;
    }
  }
}