@layer components {
  /* Base
  /* -------------------------------------------------------------------------- */

  /* A catalogue's works and recordings as icon and count pairs */
  .catalogue-assets {
    display: inline-flex;
    gap: var(--inline-space);
  }

  /* Elements
  /* -------------------------------------------------------------------------- */

  .catalogue-assets__count {
    align-items: center;
    display: inline-flex;
    gap: 0.3em;

    .icon {
      color: var(--color-ink-muted);
    }
  }

  /* Variants
  /* -------------------------------------------------------------------------- */

  /* Row action buttons across the app's tables (see Components::RowActions):
     the destructive one turns red on hover */
  .catalogue-row__control--danger {
    @media (any-hover: hover) {
      &:hover {
        --btn-color: var(--color-negative);
      }
    }
  }
}