ul.menu,
ul.links {
  margin: 0;
  padding: 0;

  > li > ul {
    margin-left: $grid-gutter;
  }
}

//unset core default
ul.menu a.is-active {
  color: var(--color-text-muted);
}

.menu-item,
.links li {
  list-style: none;
  position: relative;
  padding: 0;
  margin: 0;

  a,
  a.is-active {
    display: block;
    padding: .5rem 1rem;
    margin-right: 2.5rem;
    border-bottom: 1px solid $color-divider-light;
    color: $color-text;

    &:hover,
    &:focus {
      color: $color-text-inverted;
    }

    &:active {
      background: transparent;
      color: $color-interaction;
    }

  }

  a.is-active {
    border-bottom-color: $color-link;
  }

  //&:first-child a {
  //  border-top: 1px solid $color-divider-light;
  //}
  &:last-child a {
    border-bottom-color: transparent;
  }
}

.toolbar .menu-item a.is-active {
  border-bottom: unset;
}

a.menu-item--toggle {
  border-left: 1px solid $color-text-inverted;
  border-radius: $button-border-radius;
  border-top: 1px solid $color-text-inverted;
  display: block;
  padding: .5rem .75rem;
  position: absolute;
  right: -2.5rem;
  @include icon(chevron-down);
  font-size: $font-size-default;
  top: 0;

  &:before {
    font-size: $font-size-default;
    vertical-align: middle;
    transition: transform 500ms ease;
  }

  &:hover,
  &:focus {
    background: $color-link;
    color: $color-text-inverted;
  }

  &:active {
    background: transparent;
    color: $color-interaction;
  }

  .menu-item--open a.menu-item--toggle:before {
    transform: rotate(-180deg);
  }
}

.inverted {
  .menu-item,
  .links li {
    a,
    //a:visited,
    a:active {
      color: $color-text-inverted;
    }
    a {
      border-color: $color-divider-dark;
    }
    a.is-active {
      border-color: $color-link;
    }
  }
}

.region-utilities-links {
  margin-top: 1rem;
  font-size: var(--font-size-s);
  display: flex;
  justify-content: flex-end;
  gap: 0 1rem;

  .links,
  .menu {
    display: flex;
    justify-content: flex-end;
    flex-flow: row wrap;
    margin-left: $grid-gutter;

    li a {
    border-width: 0;
    padding: .25rem 1rem;
    margin: 0;
    }
  }
}

.block-language {
  .links {
    margin-right: 2rem;
    @include icon(globe);

    &:before {
      color: var(--color-link);
      line-height: 2;
      padding-right: .25rem;
    }

    li a {
      color: var(--color-link);
      padding-left: .5rem;
      padding-right: .5rem;
      &:focus,
      &:hover {
        color: var(--color-text-inverted);
      }
      &:active {
        color: var(--color-interaction);
      }
    }
    li.is-active a {
      color: var(--color-text-muted);
      border-bottom: 1px solid;
    }
  }
}

// heal menu link margin side-effect on environment indicator

.menu-item.menu-item__admin_toolbar_tools-help a {
  margin-right: 0;
  padding-left: .5rem !important;
}

