.#{$ns}AnchorNav {
  display: flex;
  height: px2rem(400px);

  &--vertical {
    .#{$ns}AnchorNav-link-wrap {
      margin: 0;
      padding: 0;
      width: var(--Tabs--vertical-width);
      border-left: var(--AnchorNav-links-container-borderRight);
      padding-bottom: px2rem(60px);

      > .#{$ns}AnchorNav-link {
        position: relative;
        display: block;

        > a {
          display: block;
          border: var(--Tabs-borderWidth) solid transparent;
          border-width: var(--AnchorNav-onActive-borderWidth);
          color: var(--Tabs-color);
          padding: 0 var(--gap-sm);
          padding-left: px2rem(10px);
          font-size: var(--fontSizeSm);
          outline: none;
          text-align: left;
          text-decoration: none;
          cursor: pointer;
          margin: 0;
          margin-left: px2rem(-2px);
          height: px2rem(32px);
          line-height: px2rem(32px);
          @include truncate();
          max-width: var(--Tabs--vertical-width);

          &:hover {
            color: var(--primary);
          }

          &:active {
            color: #144bcc;
          }
        }

        &.is-active {
          > a {
            color: var(--primary);
            border-color: var(--primary);
          }
          > a:hover {
            color: #528eff;
            border-color: #528eff;
          }
          > a:active {
            color: #144bcc;
            border-color: #144bcc;
          }
        }
      }
    }
  }

  &--horizontal {
    flex-direction: column;
    .#{$ns}AnchorNav-link-wrap {
      user-select: none;
      margin: 0px;
      padding: 0px;
      border-bottom: var(--Tabs-borderWidth) solid var(--Tabs-borderColor);
      list-style: none;

      > .#{$ns}AnchorNav-link {
        margin-bottom: calc(var(--Tabs-borderWidth) * -1);
        display: inline-block;
        position: relative;

        > a {
          @include truncate();
          max-width: var(--Tabs--vertical-width);
        }

        > a:first-child {
          font-size: var(--Tabs-linkFontSize);
          outline: 0;
          border: var(--Tabs-borderWidth) solid transparent;
          border-width: 0 0 2px 0;
          border-top-left-radius: var(--Tabs-borderRadius);
          border-top-right-radius: var(--Tabs-borderRadius);
          color: var(--Tabs-color);
          margin: var(--Tabs-linkMargin);
          padding: var(--Tabs-linkPadding);
          text-decoration: none;
          cursor: pointer;
          display: block;

          &:hover,
          &:focus {
            color: var(--primary);
            background: transparent;
            border-color: transparent;
          }
        }

        &:last-child {
          > a {
            margin: 0;
          }
        }

        &.is-active {
          > a:first-child,
          > a:first-child:hover,
          > a:first-child:focus {
            font-size: var(--Tabs-linkFontSize);
            border-width: 0 0 2px 0;
            border-color: var(--Tabs--line-onHover-borderColor);
            color: var(--primary);
            background: transparent;
          }
        }
      }
    }
  }

  &-section-wrap {
    border: none;
    flex-grow: 1;
    overflow: auto;
    scroll-behavior: smooth;
    background: var(--Tabs-content-bg);
    position: relative;

    > .#{$ns}AnchorNav-section {
      display: block;
      padding: var(--gap-base);
    }
  }
}