@use "../../variables/units";
@use "../../variables/colors";

@use "../../utilities";
@use "../link";

@mixin root() {
  @include utilities.clearfix();

  list-style: none;
  margin-block-end: units.$u2;
  margin-block-start: units.$u2;
  padding-block: 0;
  padding-inline: units.$u1;

  > li {
    display: flex;
    float: inline-start;

    + li::before {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 21.1 55.7' %3E%3Cpath fill='%23666' d='M0 45.6c0-.1.1-.4.4-1.1L14.9 8.6c.2-.5.5-.8 1-1 .5-.2 1.1-.3 1.9-.3h.7c1.8 0 2.6.3 2.6.8 0 .2-.1.6-.4 1.1l-14.5 36c-.2.5-.5.8-1 1-.4.2-1.1.2-1.9.2h-.8c-1.7 0-2.5-.2-2.5-.8z'/%3E%3C/svg%3E");
      background-position: center;
      background-repeat: no-repeat;
      content: "";
      display: inline-block;
      margin-block: 0;
      margin-inline: 4px;
      position: relative;
      inline-size: 7px;
      inset-block-start: 1px;
    }

    &.active {
      color: colors.$grijs-60;
    }

    > a {
      @include link.reverse();

      &,
      &:visited {
        color: colors.$grasgroen;
      }
    }
  }
}