@layer components {
  /* Links every visible root's tile grid on the /kategorier hub. */
  .category-directory__heading-link {
    color: inherit;
    text-decoration: none;
  }

  .category-directory__heading-link:hover {
    color: var(--color-primary);
  }

  /* Subcategory directory on root and hub category pages: narrow product cards. */
  .category-tiles {
    --grid-layout-gap: var(--block-space);
    --grid-column-count: 5;
    --grid-item-min-width: 160px;

    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
    --grid-item-max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

    display: grid;
    gap: var(--grid-layout-gap);
    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item-min-width), var(--grid-item-max-width)), 1fr));
    margin-block-end: var(--block-space-double);
  }

  .category-tile {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    border-radius: 1.5rem;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-soft);
    color: var(--color-ink);
    text-decoration: none;
    transition: box-shadow 200ms;
  }

  .category-tile:hover {
    box-shadow: var(--shadow);

    .category-tile__image {
      transform: scale(1.05);
    }

    .category-tile__name {
      color: var(--color-primary-hover);
    }
  }

  .category-tile__image {
    width: 100%;
    padding: var(--block-space);
    aspect-ratio: 4/3;
    border-block-end: 1px solid var(--color-border);
    object-fit: contain;
    transition: transform 300ms;
  }

  .category-tile__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-tag-bg);
  }

  .category-tile__image--placeholder .material-symbols-outlined {
    color: var(--color-muted);
    font-size: 4rem;
  }

  .category-tile__content {
    display: flex;
    flex-direction: column;
    padding: var(--block-space);
    gap: var(--block-space-quarter);
  }

  .category-tile__name {
    font-weight: 600;
    hyphens: auto;
    overflow-wrap: break-word;
  }

  .category-tile__count {
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  /* Category tree in the filter sidebar, matching the /produkter facets.
     Indent with margin: .filter__list-item's padding-inline shorthand loads
     after this file and would override a padding-inline-start here. */
  .category-tree__child {
    margin-inline-start: var(--block-space-double);
  }

  .category-tree__link {
    display: flex;
    flex: 1;
    align-items: center;
    color: var(--color-ink);
    font-size: var(--text-sm);
    gap: var(--inline-space-half);
    min-inline-size: 0;
    text-decoration: none;
  }

  .category-tree__link:hover {
    color: var(--color-primary);
  }

  .category-tree__link--active {
    color: var(--color-primary);
    font-weight: 600;
  }
}