/* The list lives in the 500px Approved editors drawer, so every row stacks
   and each cell names itself. */

.integrations-styles__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--spacing-smd) var(--spacing-md);
    padding: var(--spacing-md);
}

.integrations-styles__row + .integrations-styles__row {
    border-top: 1px solid var(--color-border-subtle);
}

.integrations-styles__row:hover {
    background: var(--color-surface-subtle);
}

.integrations-styles__name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
}

.integrations-styles__name-link {
    color: inherit;
    text-decoration: none;
}

.integrations-styles__name-link:hover {
    color: inherit;
    text-decoration: underline;
}

.integrations-styles__editors {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.integrations-styles__count {
    min-width: 1ch;
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
}

.integrations-styles__pct {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.integrations-styles__name,
.integrations-styles__train,
.integrations-styles__practice {
    grid-column: 1 / -1;
}

/* Every practice score on the style, newest first: the editor, then the score. */
.integrations-styles__practice-score {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.integrations-styles__practice-score + .integrations-styles__practice-score {
    margin-top: var(--spacing-xs);
}

.integrations-styles__cell-label {
    display: block;
    margin-bottom: var(--spacing-xs);
}