:root {
  /* Alternative Pills*/
  --pill-alt-color: var(--placeholder-color);
  --pill-alt-background: var(--light-color);
  --pill-alt-shadow: var(--shadow-main);
  --pill-alt-color-hover: var(--secondary-color);
  --pill-alt-background-active: none;
  --pill-alt-background-active-image: linear-gradient(122deg, var(--primary-light-color) 0, var(--primary-dark-color) 100%);
  --pill-alt-color-active: var(--light-color);
}

.uk-subnav-pill > .uk-active > a {
  border: unset;
}

.uk-subnav-pill-alt {
  background: var(--pill-alt-background);
  border-radius: 56px;
  box-shadow: var(--pill-alt-shadow);
  padding: 4px;
}

.uk-subnav-pill-alt > * > :first-child {
  padding: 10px 20px;
  color: var(--pill-alt-color);
  border-radius: 56px;
}

.uk-subnav.uk-subnav-pill-alt > :first-child {
  padding-left: 0;
}

.uk-subnav-pill-alt > :hover > a {
  color: var(--pill-alt-color-hover);
  border-color: unset;
  position: relative;
}

.uk-subnav-pill-alt > :hover > a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--pill-alt-background-active);
  background-image: var(--pill-alt-background-active-image);
  opacity: 0.1;
  border-radius: inherit;
}

.uk-subnav-pill-alt > .uk-active > a {
  background-color: var(--pill-alt-background-active);
  color: var(--pill-alt-color-active);
  border-color: unset;
  background-image: var(--pill-alt-background-active-image);
}