@import "../base";
@import "./config";

.horizontal {
  padding-top: $navigation-space;
  padding-bottom: $navigation-space;

  > .link, > .button {
    display: inline-block;
    margin-right: $navigation-space;
    font-size: $font-size-normal;
    font-weight: $font-weight-normal;
    color: $navigation-color;
    > small {
      padding: 0 $navigation-space;
      margin-left: $navigation-space;
      font-weight: $font-weight-bold;
      color: $navigation-color;
      background-color: $navigation-background;
      border-radius: $navigation-space;
    }
  }
}

.vertical {
  padding-top: $navigation-space;
  padding-bottom: $navigation-space;

  > .link, > .button {
    display: block;
    padding: 0 $navigation-space;
    line-height: $unit;
    transition-property: box-shadow, opacity;
    &.active {
      box-shadow: inset 10 * $unit 0 $navigation-background;
    }
    > small {
      float: right;
      opacity: .5;
    }
  }
}