.properties {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-8);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-card);
  background: var(--color-control-bg);
}

@media (width >= 1024px) {
  .properties {
    margin-top: var(--space-24);
  }
}

.properties__title {
  padding: var(--space-8) var(--space-16);
  font-family: var(--font-code);
  font-size: var(--font-size-body);
  font-weight: 400;
  font-variation-settings: normal;
  line-height: var(--line-height-body);
  color: var(--color-accent-active);
}

.properties__list {
  margin: 0;
}

.properties__row {
  position: relative;
  display: flex;
  gap: var(--space-16);
  align-items: baseline;
  padding: var(--space-8) var(--space-16);
  transition: background-color var(--duration-fast) var(--ease-out);

  --selection-inset-x: 1px;
  --selection-inset-y: 0px;
}

.properties__name {
  flex: none;
  width: 88px;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  color: var(--color-text-secondary);
}

.properties__value {
  flex: 1;
  margin: 0;
  font-size: var(--font-size-ui);
  font-weight: 500;
  line-height: var(--line-height-ui);
}

@media (hover: hover) and (pointer: fine) {
  .split:has([data-pair="team"]:hover) [data-pair="team"],
  .split:has([data-pair="app"]:hover) [data-pair="app"],
  .split:has([data-pair="brands"]:hover) [data-pair="brands"],
  .split:has([data-pair="review"]:hover) [data-pair="review"],
  .split:has([data-pair="modes"]:hover) [data-pair="modes"],
  .split:has([data-pair="components"]:hover) [data-pair="components"],
  .split:has([data-pair="guidelines"]:hover) [data-pair="guidelines"],
  .split:has([data-pair="mobile"]:hover) [data-pair="mobile"],
  .split:has([data-pair="kit"]:hover) [data-pair="kit"],
  .split:has([data-pair="spec"]:hover) [data-pair="spec"] {
    &.properties__row {
      background-color: var(--color-accent-tint-active);
    }

    & .selection--linked {
      opacity: 1;
    }

    & .selection--linked i {
      transform: scale(1);
    }

    & .list-marker {
      color: var(--color-accent);
    }

    & .list-marker__fill {
      fill: currentColor;
    }
  }
}