:root {
  --list-padding-min: 10px;
  --list-padding-max: 20px;
  --gap: 16px;
}

.nav-list {
  --stroke-size: calc(6 / 48 * 1em);
  --transition: 150ms ease-in-out;
  display: grid;
  padding-top: var(--list-padding-min);
  padding-bottom: var(--list-padding-min);
  padding-right: var(--list-padding-min);
  padding-left: var(--list-padding-min);
  gap: 16px;
  background: var(--color-background);
}

@media (width >= 768px) {
  .nav-list {
    --block-padding: 1px;
    gap:14px;
    line-height: calc(42 / 36);
  }
}


/* TODO: рассчитать отступ слева более элегантно */

@media (width >= 1024px) {
  .nav-list {
    --block-padding: 6px;
    --gap: 6px;
    padding-top: 0;
    padding-bottom: var(--list-padding-max);
    padding-right: var(--list-padding-max);
    padding-left: calc(37*var(--gap));
    gap: 6px;
    line-height: inherit;
  }
}

@media (width >= 1366px) {
  .nav-list {
    padding-left: calc(38*var(--gap));
  }
}

@media (width >= 1680px) {
  .nav-list {
    padding-left: calc(45*var(--gap));
  }
}

.nav-list__item {
  position: relative;
  z-index: 0;
}

.nav-list__link {
  display: inline-block;
  vertical-align: top;
  padding-top: var(--block-padding);
  padding-bottom: var(--block-padding);
  padding-left: 10px;
  padding-right: 10px;
  text-decoration: none;
  color: inherit;
}

.nav-list__link::after {
  content: "";
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--accent-color);
  border-radius: var(--stroke-size);
  transition: var(--transition);
}

.offline .nav-list__link::after {
  background-image: none;
}

.nav-list__link-text {
  position: relative;
  display: block;
  letter-spacing: var(--letter-spacing);
}

.nav-list__link-text::after {
  content: "";
  position: relative;
  z-index: -1;
  display: block;
  height: round(var(--stroke-size), 1px);
  background-color: var(--accent-color);
  border-radius: 1em;
}

@supports not (height: round(1.5px, 1px)) {
  .nav-list__link-text::after {
    height: var(--stroke-size);
  }
}

.nav-list__link:hover::after {
  opacity: calc(1 - var(--is-dark-theme-on) * 0.6);
  visibility: visible;
}

.nav-list__link:hover .nav-list__link-text::after {
  opacity: 0;
  transition: var(--transition);
}
