.link {
  color: var(--blue-900);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  text-decoration: none;
}

.link:hover {
  color: var(--blue-950);
}

.link--small {
  font-size: var(--font-size-sm);
}

.link--large {
  font-size: var(--font-size-lg);
}

.link--underline {
  text-decoration: underline;
}

.link--chevron-right {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-s);
}

.link__chevron {
  font-size: var(--font-size-xl);
  color: var(--grey-700);
}

.link:hover .link__chevron {
  color: var(--grey-900);
}

.link--icon-left {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-s);
}

.link__icon {
  font-size: var(--font-size-lg); /* 19px - step superiore al testo */
  color: var(--grey-700);
}

.link:hover .link__icon {
  color: var(--grey-900);
}

/* Combinazione di due modifier */
.link--icon-left {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-s);
}

.link--chevron-right {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-s);
}

/* Combinazione con underline - richiede wrapper per testo */
<a class="link link--icon-left link--underline">
  <span class="link__icon">folder</span>
  <span class="link__text">testo</span>
</a>

/* CSS */
.link--icon-left.link--underline {
  text-decoration: none;
}

.link--icon-left.link--underline .link__text {
  text-decoration: underline;
}

/* Dimostrazione di componibilità */
<a class="link link--small link--icon-left">...</a>

/* I modificatori sono ortogonali e componibili */
.link--small {
  font-size: var(--font-size-sm); /* 14px */
}

/* Regola di proporzionalità: icone = step superiore al testo */
.link--small .link__icon,
.link--small .link__chevron {
  font-size: var(--font-size-base); /* 16px - step superiore */
}

.link--icon-left {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-s);
}

/* Split Link - combinazione di link e dropdown */
<div class="link--split">
  <a href="#" class="link__split-label">split link</a>
  <button class="link__split-chevron">
    <span class="material-symbols-outlined">arrow_drop_down</span>
  </button>
  <div class="link__split-dropdown">
    <a href="#" class="link">link 1</a>
    <a href="#" class="link">link 2</a>
  </div>
</div>

/* CSS */
.link--split {
  display: inline-flex;
  position: relative;
}

.link__split-label {
  padding: var(--spacing-s) var(--spacing-l);
  background-color: var(--grey-200);
}

.link__split-chevron {
  padding: var(--spacing-s) var(--spacing-m);
  background-color: var(--grey-300);
}

.link__split-dropdown {
  position: absolute;
  top: 100%;
  background-color: var(--grey-200);
  padding: var(--spacing-s);
  gap: var(--spacing-s);
}