@layer components {
  :root {
    --card-border-radius: var(--spacing-sm);
    --card-padding: var(--spacing-md);
  }

  a {
    color: var(--link-primary);
    text-underline-offset: 0.2em;
  }

  .icon {
    width: var(--spacing-md);
    height: var(--spacing-md);
  }

  .card {
    border: 1px solid var(--border-primary);
    border-radius: var(--card-border-radius);
    background-color: var(--surface-secondary);
    padding: var(--card-padding);
  }

  .button {
    border: 2px solid var(--accent-primary);
    border-radius: var(--spacing-sm);
    background-color: transparent;
    padding: var(--spacing-sm);
    width: fit-content;
    color: var(--accent-primary);
    font-weight: 600;
    text-decoration: none;

    &:hover {
      background-color: var(--accent-primary);
      color: var(--surface-primary);
    }

    &.size-sm {
      border-width: 1px;
      padding: var(--spacing-sm);
      font-size: var(--body-sm);
    }

    &.primary {
      border-color: var(--accent-primary);
      background-color: var(--accent-primary);
      color: var(--surface-primary);
      &:hover {
        background-color: var(--accent-primary);
        color: var(--surface-primary);
      }
    }
  }

  .adaptively-scrollable {
    @media (max-width: 1024px) {
      max-width: 100%;
      overflow-x: auto;
      scrollbar-color: var(--accent-primary) transparent;
      scrollbar-width: thin;

      .card {
        flex: 0 0 auto;
        max-width: 40vw;
      }
    }

    @media (max-width: 768px) {
      .card {
        max-width: 55vw;
      }
    }

    @media (max-width: 480px) {
      .card {
        max-width: 100%;
      }
    }
  }
}