@layer components.blocks {
  .terms {
    @mixin ma var(--size-0);

    display: grid;
  }

  .term {
    display: flex;
    flex-direction: column;
    gap: var(--size-8);
    justify-content: space-between;
  }

  .term__name {
    @mixin typo_heading-3;
    hyphens: auto;
    overflow-wrap: break-word;
  }

  .term__kind {
    @mixin typo_label;

    font-size: var(--type--2);
    color: var(--color-text-quarternary);
  }

  .term__body {
    @mixin typo_body;
    @mixin ma var(--size-0);
  }

  :where(.term__body p) {
    @mixin my var(--size-0);
  }

  .term__see {
    @mixin typo_label;
    @mixin mt var(--size-8);
    @mixin mb var(--size-0);
    @mixin pt var(--size-5);
    @mixin border-t var(--border-hairline), solid, var(--color-border-subtle);

    display: flex;
    flex-wrap: wrap;
    gap: var(--size-5);

    font-size: var(--type--2);
    color: var(--color-text-quarternary);
  }

  .term__see-label::after {
    content: " ⟫";
  }

  .terms .term__link {
    color: var(--color-text-primary);
    text-decoration: underline;
    text-underline-offset: var(--size-2);

    &:hover,
    &:focus-visible {
      color: var(--color-primary);
    }
  }

  .terms--cross {
    @mixin my var(--space-9);

    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    gap: var(--border-card);
    border: var(--border-card) solid var(--color-border-strong);
    background-color: var(--color-border-strong);
  }

  .terms--cross .term {
    @mixin py var(--size-8);
    @mixin px var(--size-9);

    color: var(--color-text-primary);
    background-color: var(--color-surface-base);

    &:not(:first-of-type) {
      box-shadow: 0 calc(-1 * var(--border-card)) 0 var(--color-border-normal);
    }
  }

  .terms--cross .term:target {
    color: var(--color-text-on-accent);
    background-color: var(--color-primary);
  }

  .terms--cross .term:target .term__kind {
    color: var(--color-text-on-accent);
  }

  .terms--cross .term__body {
    @mixin py var(--size-8);
    @mixin px var(--size-9);

    background-color: var(--color-surface-elevated-1);
  }

  .terms--compact {
    @mixin my var(--space-9);
    @mixin border-t var(--border-hairline), solid, var(--color-border-strong);

    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    column-gap: var(--size-9);
  }

  .terms--compact .term,
  .terms--compact .term__body {
    @mixin py var(--size-5);
    @mixin border-b var(--border-hairline), solid, var(--color-border-subtle);
  }

  .terms--compact .term {
    gap: var(--size-2);
    justify-content: start;
  }

  .terms--compact .term__name {
    @mixin typo_heading-5;
  }

  .terms--compact .term__body {
    @mixin typo_definition-data;
  }

  .terms--compact .term__see {
    @mixin mt var(--size-3);

    padding-block-start: var(--size-0);
    border-block-start: none;
  }

  .terms--compact .term:target .term__name {
    color: var(--color-primary);
  }

  @media (--bp-tablet-down) {
    .terms--compact {
      grid-template-columns: minmax(0, 1fr);
    }

    .terms--compact .term {
      padding-block-end: var(--size-0);
      border-block-end: none;
    }
  }
}