/* -------------------------------- 

File#: _2_side-navigation-v4
Title: Side Navigation v4
Descr: Main, side navigation
Usage: codyhouse.co/license

-------------------------------- */
.sidenav-v4 {
  --sidenav-v4-icon-size: 20px;
  --sidenav-v4-icon-margin-right: var(--space-xxs);
}

.sidenav-v4__item {
  position: relative;
}

.sidenav-v4__link,
.sidenav-v4__sub-link,
.sidenav-v4__separator {
  padding: var(--space-sm);
}

.sidenav-v4__link, .sidenav-v4__sub-link {
  display: flex;
  align-items: center;
  width: 100%;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  line-height: 1;
  font-size: var(--text-md);
  transition: 0.2s;
}
.sidenav-v4__link:hover, .sidenav-v4__sub-link:hover {
  color: var(--color-primary);
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075);
}
.sidenav-v4__link[aria-current=page], .sidenav-v4__sub-link[aria-current=page] {
  color: var(--color-primary);
}

.sidenav-v4__sub-link {
  position: relative;
  color: var(--color-contrast-medium);
  /* dot indicator */
}
.sidenav-v4__sub-link::before {
  content: "";
  display: block;
  --size: 6px;
  width: var(--size);
  height: var(--size);
  background: currentColor;
  border-radius: 50%;
  margin-left: calc(var(--sidenav-v4-icon-size)/2 - var(--size)/2);
  margin-right: calc(var(--sidenav-v4-icon-size)/2 - var(--size)/2 + var(--sidenav-v4-icon-margin-right));
  opacity: 0;
  /* visible only if current */
}
.sidenav-v4__sub-link[aria-current=page]::before {
  /* show dot indicator */
  opacity: 1;
}

.sidenav-v4__notification-marker {
  margin-left: auto;
  background-color: var(--color-accent);
  border-radius: var(--radius-md);
  height: 16px;
  line-height: 16px;
  padding: 0 4px;
  color: var(--color-white);
  font-size: 12px;
  /* hide - visible only on desktop */
  display: none;
}

/* label icon */
.sidenav-v4__icon {
  --size: var(--sidenav-v4-icon-size);
  margin-right: var(--sidenav-v4-icon-margin-right);
}

/* arrow icon - visible on mobile if item is expandable */
.sidenav-v4__arrow-icon {
  --size: 20px;
  /* hide icon for links - show only for buttons created in JS */
}
.sidenav-v4__arrow-icon .icon__group {
  will-change: transform;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  transition: -webkit-transform 0.3s var(--ease-out);
  transition: transform 0.3s var(--ease-out);
  transition: transform 0.3s var(--ease-out), -webkit-transform 0.3s var(--ease-out);
}
.sidenav-v4__arrow-icon .icon__group > * {
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  stroke-dasharray: 20;
  stroke-dashoffset: 0;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  transition: stroke-dashoffset 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, stroke-dashoffset 0.3s;
  transition: transform 0.3s, stroke-dashoffset 0.3s, -webkit-transform 0.3s;
  transition-timing-function: var(--ease-out);
}
.sidenav-v4__item--collapsed .sidenav-v4__arrow-icon .icon__group {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.sidenav-v4__item--collapsed .sidenav-v4__arrow-icon .icon__group > * {
  -webkit-transform: translateY(4px);
          transform: translateY(4px);
}
.sidenav-v4__item--collapsed .sidenav-v4__arrow-icon .icon__group > *:first-child {
  stroke-dashoffset: 10.15;
}
.sidenav-v4__item--collapsed .sidenav-v4__arrow-icon .icon__group > *:last-child {
  stroke-dashoffset: 10.15;
}
.sidenav-v4__link--href .sidenav-v4__arrow-icon {
  display: none;
}

/* current item */
.sidenav-v4__item--current .sidenav-v4__sub-list {
  display: block;
  /* show sublist */
}

/* separator */
.sidenav-v4__separator span {
  display: block;
  width: var(--sidenav-v4-icon-size);
  height: 1px;
  background-color: var(--color-contrast-lower);
}

/* mobile only */
@media not all and (min-width: 64rem) {
  .sidenav-v4__item--collapsed .sidenav-v4__sub-list {
    display: none;
  }

  .sidenav-v4__link--href {
    display: none;
    /* hide link -> show button */
  }
}
/* desktop */
@media (min-width: 64rem) {
  .sidenav-v4__sub-list {
    display: none;
  }

  .sidenav-v4__link,
.sidenav-v4__sub-link,
.sidenav-v4__separator {
    padding: var(--space-xs);
  }

  .sidenav-v4__link,
.sidenav-v4__sub-link {
    font-size: var(--text-sm);
  }

  .sidenav-v4__link--btn {
    display: none;
    /* hide button -> show link */
  }

  /* tooltip */
  .sidenav-v4__item:not(.sidenav-v4__item--current) .sidenav-v4__sub-list {
    width: 220px;
    position: absolute;
    z-index: var(--z-index-overlay);
    left: 100%;
    top: 0;
    background-color: var(--color-bg-light);
    box-shadow: var(--inner-glow), var(--shadow-md);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .sidenav-v4__item:not(.sidenav-v4__item--current) .sidenav-v4__sub-link {
    border-radius: 0;
    color: var(--color-contrast-high);
  }
  .sidenav-v4__item:not(.sidenav-v4__item--current) .sidenav-v4__sub-link::before {
    display: none;
    /* remove dot indicator */
  }
  .sidenav-v4__item:not(.sidenav-v4__item--current) .sidenav-v4__sub-link:hover {
    color: var(--color-primary);
  }
  .sidenav-v4__item:not(.sidenav-v4__item--current).sidenav-v4__item--hover .sidenav-v4__sub-list, .sidenav-v4__item:not(.sidenav-v4__item--current):focus-within .sidenav-v4__sub-list {
    display: block;
  }
  .sidenav-v4__item:not(.sidenav-v4__item--current):hover .sidenav-v4__link {
    /* highlight main link if tooltip is visible */
    color: var(--color-primary);
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075);
  }

  /* notification marker */
  .sidenav-v4__notification-marker {
    display: block;
  }
}