.modern-link {
  border-radius: 4px;
  padding: 4px 10px 5px 10px;
  font-size: 14.5px;
  color: var(--accent-foreground-rest);
  fill: var(--accent-foreground-rest);
  transition: background-color 0.1s ease, color 0.1s ease;
  text-decoration: none;
  display: flex;
}

  .modern-link:hover {
    background-color: #FFFFFF0F;
    color: var(--accent-foreground-hover);
    fill: var(--accent-foreground-hover);
  }

  .modern-link:active {
    background-color: #FFFFFF08;
    color: var(--accent-foreground-active);
    fill: var(--accent-foreground-active);
  }

.modern-link-left {
  margin: 0 0 0 -10px;
}

.modern-link-right {
  margin: 0 -10px 0 0;
}

.modern-link-content {
  display: flex;
  gap: 8px;
  align-items: center;
}

.modern-link-icon {
  width: 12px;
  height: 12px;
  margin-top: 1.5px
}