@subnav-item-font-size: @global-small-font-size;
@subnav-item-line-height: 17px;
@subnav-item-font-weight: 400;

/* Pills */
@subnav-pill-item-padding-vertical: 10px;
@subnav-pill-item-padding-horizontal: 20px;
@subnav-pill-item-border-radius: 60px;
@subnav-pill-item-background: transparent;
@subnav-pill-item-color: @global-primary-background;
@subnav-pill-item-border: @global-muted-background;
@subnav-pill-item-border-width: @global-border-width;
@subnav-pill-item-hover-background: transparent;
@subnav-pill-item-hover-color: @primary-light-color;
@subnav-pill-item-hover-border: @primary-light-color;
@subnav-pill-item-active-background: @global-primary-background;
@subnav-pill-item-active-background-gradient: @global-primary-gradient;
@subnav-pill-item-active-border: transparent;
@subnav-pill-item-active-color: @global-inverse-color;

/* Pills aly*/
@subnav-pill-alt-padding: 4px;
@subnav-pill-alt-border-radius: 60px;
@subnav-pill-alt-background: @global-inverse-color;
@subnav-pill-alt-box-shadow: @global-large-box-shadow;
@subnav-pill-alt-item-padding-vertical: 10px;
@subnav-pill-alt-item-padding-horizontal: 20px;
@subnav-pill-alt-item-color: @global-meta-color;
@subnav-pill-alt-item-hover-color: @global-secondary-background;
@subnav-pill-alt-item-active-background: unset;
@subnav-pill-alt-item-active-background-gradient: @global-primary-gradient;
@subnav-pill-alt-item-active-color: @global-inverse-color;


.hook-subnav-item() {
  font-size: @subnav-item-font-size;
  font-weight: @subnav-item-font-weight;
  line-height: @subnav-item-line-height;
}

.hook-subnav-pill-item() {
  border: @subnav-pill-item-border-width solid @subnav-pill-item-border;
  border-radius: @subnav-pill-item-border-radius;
  background-origin: border-box;
}

.hook-subnav-pill-item-hover() {
  border-color: @subnav-pill-item-hover-border;
}

.hook-subnav-pill-item-active() {
  border-color: @subnav-pill-item-active-border;
  background-image: @subnav-pill-item-active-background-gradient;
}

.hook-subnav-misc() {
  .uk-subnav.uk-subnav-pill-alt {
    background: @subnav-pill-alt-background;
    border-radius: @subnav-pill-alt-border-radius;
    box-shadow: @subnav-pill-alt-box-shadow;
    padding: @subnav-pill-alt-padding;

    & > :first-child {
      padding-left: 0;
    }

    & > * > :first-child {
      padding: @subnav-pill-alt-item-padding-vertical @subnav-pill-alt-item-padding-horizontal;
      color: @subnav-pill-alt-item-color;
      border-radius: @subnav-pill-alt-border-radius;
    }

    & > :hover > a {
      color: @subnav-pill-alt-item-hover-color;
      position: relative;

      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: @subnav-pill-alt-item-active-background;
        background-image: @subnav-pill-alt-item-active-background-gradient;
        opacity: 0.1;
        border-radius: inherit;
      }
    }

    & > .uk-active > a {
      background-color: @subnav-pill-alt-item-active-background;
      color: @subnav-pill-alt-item-active-color;
      background-image: @subnav-pill-alt-item-active-background-gradient;
    }
  }
}

/* Inverse */
@inverse-subnav-pill-alt-box-shadow: @inverse-global-large-box-shadow;

.hook-inverse-misc() {
  .uk-subnav.uk-subnav-pill-alt {
    box-shadow: @inverse-subnav-pill-alt-box-shadow;
  }
}