.link {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  gap: 0.5rem;
  text-decoration: none;
  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
  font-size: var(--mantine-font-size-lg);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  @mixin hover {
    background-color: light-dark(
      var(--mantine-color-gray-0),
      var(--mantine-color-dark-6)
    );
  }

  [data-mantine-color-scheme] &[data-active] {
    background-color: var(--mantine-primary-color-light);
    color: var(--mantine-primary-color-light-color);
  }
}