$_navigation-link-padding: 0.6em;

.navigation {

flex: 1 0 10rem;
padding-bottom: $base-spacing;
padding-right: calc(#{$base-spacing} - #{$_navigation-link-padding});
padding-top: $base-spacing;

}

.navigation__link {

background-color: transparent;
color: $base-font-color;
display: block;
line-height: 1;
margin-left: -($_navigation-link-padding);
padding: $_navigation-link-padding;
transition: background-color $base-duration $base-timing,
            color $base-duration $base-timing;

&:not(:last-of-type) {
  margin-bottom: $small-spacing;
}

&:hover {
  // background-color: mix($black, $base-background-color, 0%);
  // border-radius: $base-border-radius;
  border: #fff solid 1px;
  color: $base-font-color;
}

}

.navigation__link–active {

font-weight: $bold-font-weight;

}