sudara/alonetone

.sub_nav {
  width: 100%;
  position: relative;
  top: -48px;
  background-color: $sub-nav-background;
  .sub_nav_inner {
    height: $baseline * 1.5;
    ul {
      display: flex;
      margin-top: 0;
      margin-bottom: 0;
      padding-top: $baseline / 4;
      justify-content: center;
      li {
        margin-right: $baseline / 2;
        &:last-child {
          margin-right: 0;
        }
        &.current {
          @include default_button(sub_nav);
          @include shadow1inner();
          background-color: $sub-nav-current-background;
          pointer-events: none;
          color: $white;
          white-space: nowrap;
          a {
            pointer-events: all;
            &:hover {
              text-decoration: none;
            }
          }
        }
        &:not(.current) {
          a {
            @include default_button(sub_nav);
            @include shadow1();
            background-color: $sub-nav-link-background;
            display: block;
            width: 100%;
            color: $sub-nav-text;
            white-space: nowrap;
            &:hover {
              text-decoration: none;
              color: $white;
            }
          }
        }
      }
    }

    &.three-column {
      height: auto;
      padding: 0;
      ul {
        flex-wrap: wrap;
        justify-content: flex-start;
        li {
          height: 32px;
          width: calc(33.3333% - 4 * #{$baseline} / 12);
          margin-left: $baseline / 4;
          margin-right: $baseline / 4;
          margin-bottom: $baseline / 6;
          &.current {
            height: 32px;
            padding-top: 11px;
          }
          &:nth-child(3n + 2) {
            margin-left: 0;
          }
          &:nth-child(3n) {
            margin-left: 0;
          }
          &:last-child {
            margin-right: $baseline / 4;
            margin-bottom: $baseline / 4;
          }
          a {
            padding-top: 11px;
            height: 100%;
          }
        }
      }
    }
    &.two-column {
      height: auto;
      padding: 0;
      ul {
        flex-wrap: wrap;
        justify-content: flex-start;
        li {
          height: 32px;
          width: calc(50% - 3 * #{$baseline} / 8);
          margin-left: $baseline / 4;
          margin-right: $baseline / 4;
          margin-bottom: $baseline / 6;
          &.current {
            height: 32px;
            padding-top: 11px;
          }
          &:nth-child(3n + 2) {
            margin-left: $baseline / 4;
          }
          &:nth-child(3n) {
            margin-left: $baseline / 4;
          }
          &:nth-child(even) {
            margin-left: 0;
          }
          &:last-child {
            margin-right: $baseline / 4;
            margin-bottom: $baseline / 4;
          }
          a {
            padding-top: 11px;
            height: 100%;
          }
        }
      }
    }
  }
}