nav {
  display: flex;
}

.gra-nav {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;

  &-fill {
    width: 100%;

    .gra-nav-item {
      flex: 1 1 auto;
      text-align: center;
    }
  }

  &-item {
    position: relative;
    font-size: $font-size-s;
    padding-inline: $space-m;
    @include min-width($breakpoint-xs) {
      font-size: $font-size;
    }
  }

  &-link {
    display: inline-block;
    position: relative;
    padding-block: $space-s;
    padding-inline: $space-s;

    &:not(.disabled, [disabled])::after {
      position: absolute;
      bottom: 6px;
      left: 50%;
      width: 0;
      height: 0;
      background-color: $color-main;
      border-radius: $border-radius-full;
      content: "";
      transform: translateX(-50%);
      transition: $transition-default;
      @include moder($modes) {
        background-color: mode("colorLinkHover");
      }
    }

    &:hover {
      &:not([disabled]):not(.disabled)::after {
        width: 4px;
        height: 4px;
      }
    }

    &:focus {
      box-shadow: none;
    }

    &.current::after {
      width: 4px;
      height: 4px;
      @include moder($modes) {
        background-color: mode("colorMain");
      }
    }
  }
}