.ds-navigation-list {
  border-bottom: var(--ds-border-rule--inverse);
  padding: 1rem 0;
  ul {
    column-gap: var(--ds-grid-gutter);
    li {
      break-inside: avoid;
      padding: 0 0 0.75rem 0;
    }
  }
  &.ds-navigation-list--blog {
    ul {
      li {
        padding-bottom: 1.5rem;
      }
    }
  }
  .ds-navigation-link {
    font-size: var(--ds-type-scale-2);
    width: 100%;
    &--inverse {
      &:hover {
        color: var(--ds-color-london-85);
        text-decoration: underline;
        text-decoration-thickness: 0.125rem;
        text-underline-offset: 0.1875rem;
      }
      &:hover span {
        border-bottom-color: transparent;
      }
    }
  }
}

.ds-navigation-inner-list-desktop-only {
  display: none;
}

.ds-navigation-list__header {
  color: var(--ds-color-london-100);
  font-family: var(--ds-type-system-sans-lining);
  font-size: var(--ds-type-scale-2);
  font-weight: 700;
  line-height: var(--ds-type-leading-upper);
  margin: 0;
  i {
    display: inline-block;
    font-style: italic;
  }
  .ds-navigation-inner-list-desktop-only & {
    margin-top: 1rem;
  }
  .ds-navigation-list.is-selected & {
    margin-bottom: 1.5rem;
  }
}

.ds-navigation-list__header-anchor {
  align-items: center;
  cursor: pointer;
  display: flex;
  outline: solid transparent;
  transition: color var(--ds-interactions-transition);
  &:hover,
  &:focus {
    color: var(--ds-color-london-85);
  }
  &::after {
    background-image: url('eds://common/static/images/icons/navigation-control--chevron-inverse.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 2rem;
    content: '';
    display: block;
    height: 2rem;
    margin: 0 0 0 auto;
    transition: transform var(--ds-interactions-transition);
    width: 2rem;
  }
  .ds-navigation-list.is-selected & {
    &::after {
      transform: scaleY(-1);
    }
  }
}

.ds-navigation-list__header-username {
  color: var(--ds-color-london-100);
  font-family: var(--ds-type-system-sans-lining);
  font-size: var(--ds-type-scale-2);
  font-weight: 700;
  line-height: var(--ds-type-leading-upper);
  margin: 0;
}

.ds-navigation-list__link-description {
  color: var(--ds-color-london-85);
  display: block;
  font-family: var(--ds-type-system-sans-lining);
  font-size: var(--ds-type-scale--1);
  font-weight: 400;
  line-height: var(--ds-type-leading-lower);
  margin: 0 0 0.125rem;
  text-decoration: none;
}

@media (--ds-viewport-min-medium) {
  .ds-navigation-list__header-username {
    font-size: var(--ds-type-scale-1);
    line-height: var(--ds-type-leading-lower);
  }
  .ds-navigation-list {
    padding: 0.8125rem 0;
  }
  .ds-masthead-nav-lists {
    padding-top: 0.5rem;
    .ds-navigation-list--account-logged-in,
    .ds-navigation-list--account-logged-out {
      .ds-masthead:not(.ds-masthead--secondary) & {
        display: none;
      }
    }
  }
}

@media (max-width: 67.9375rem) {
  .ds-navigation-list {
    ul {
      clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
      height: 0.0625rem;
      overflow: hidden;
      position: absolute;
      width: 0.0625rem;
    }
    &.ds-navigation-list.is-selected {
      ul {
        clip: auto;
        flex: 0 0 100%;
        height: auto;
        overflow: visible;
        position: static;
        width: auto;
      }
    }
    &.ds-navigation-list--blog {
      &.ds-navigation-list.is-selected {
        padding-bottom: 0;
      }
    }
  }
  .ds-navigation-list-items--opinion:not(.is-selected) {
    visibility: hidden;
  }
  .ds-navigation-list-items--current-topics:not(.is-selected) {
    visibility: hidden;
  }
  .ds-navigation-list-items--world:not(.is-selected) {
    visibility: hidden;
  }
  .ds-navigation-list-items--in-depth:not(.is-selected) {
    visibility: hidden;
  }
  .ds-navigation-list-items--business-and-economics:not(.is-selected) {
    visibility: hidden;
  }
  .ds-navigation-list-items--culture-and-society:not(.is-selected) {
    visibility: hidden;
  }
  .ds-navigation-list-items--more:not(.is-selected) {
    visibility: hidden;
  }
}

@media (--ds-viewport-max-medium) {
  .ds-navigation-list-items--account-logged-in:not(.is-selected) {
    visibility: hidden;
  }
}

@media (--ds-viewport-min-medium) {
  .ds-navigation-list {
    ul {
      column-count: 1;
    }
    .ds-navigation-link {
      font-size: var(--ds-type-scale-1);
    }
  }
  .ds-navigation-list__header {
    font-size: var(--ds-type-scale-1);
  }
}

@media (--ds-viewport-min-large) {
  .ds-navigation-list {
    ul {
      column-count: 3;
    }
  }
}

@media (min-width: 68rem) {
  .ds-navigation-list {
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
    &.ds-navigation-list--blog {
      padding-bottom: 0.5rem;
    }
  }
  .ds-navigation-list__header {
    margin-bottom: 1.5rem;
  }
}

@media (--ds-viewport-min-xlarge) {
  .ds-navigation-list {
    padding-right: 2rem;
    &.ds-navigation-list--section {
      border-bottom: 0;
      border-right: var(--ds-border-rule--inverse);
      grid-area: auto / 3 / auto / 11;
      margin-top: 1.5rem;
      padding-bottom: 0;
      padding-top: 0;
      ul {
        column-count: 4;
      }
    }
    &.ds-navigation-list--feature,
    .link-groups & {
      border-bottom: 0;
      border-right: var(--ds-border-rule--inverse);
      grid-area: auto / 1 / auto / 3;
      margin-top: 1.5rem;
      padding-bottom: 0;
      padding-top: 0;
      ul {
        column-count: unset;
      }
    }
    .link-groups &:last-of-type {
      border-right: 0;
    }
    &.ds-navigation-list--more {
      border-bottom: 0;
      grid-area: auto / 11 / auto / 13;
      padding-bottom: 0;
      ul {
        column-count: unset;
      }
    }
    &.ds-navigation-list-no-desktop {
      display: none;
    }
    .ds-navigation-inner-list-desktop-only {
      display: list-item;
    }
  }
}