/*
 * navigation
 */
$navigation-fillcolor-icons: #6D7178 !default;
$padding-left-link: 2rem !default;

.navigation__link,
.navigation__link--groupHeader {
  padding: .95rem 1em .95rem $padding-left-link;
  color: var(--color-nav-link, $white);
  text-decoration: none;
  display: block;
}

@if $rtl-option == true {
  [dir="rtl"] {
    .navigation__link,
    .navigation__link--groupHeader {
      padding: .95rem $padding-left-link .95rem 1em;
    }
  }
}

.navigation__icon {
  color: var(--fillcolor-icons, $navigation-fillcolor-icons);
}

.navigation__refresh {
  display: none;
}

.navigation__link:focus,
.navigation__link:hover {
  background: $navigation-hover-bg-color;
  color: var(--color-nav-link, $pm-global-light);
  text-decoration: none;
}
[aria-current="page"].navigation__link {
  background: $navigation-hover-bg-color;
  color: var(--color-nav-active, $white);
  font-weight: bold;

  &:hover .navigation__icon:not(.navigation__icon--expand),
  .navigation__icon {
    color: var(--color-nav-active, $white);
  }

  .navigation__refresh {
    display: inline-flex;
  }

}

// labels/folders sections
.navigation__link--groupHeader-link {
  color: var(--color-nav-link, $white);
  .navigation__icon--expand {
    color: var(--fillcolor-icons, $navigation-fillcolor-icons);
  }
  //&:focus, // gimme focus-visible !!!!
  &:hover {
    color: var(--color-nav-link, $pm-global-light);
    .navigation__icon {
		color: var(--fillcolor-icons, $white);
    }
  }
}

/* expand hover only on button + groupHeader */
.navigation__link--groupHeader-link {
  color: var(--fillcolor-icons, $navigation-fillcolor-icons);
}
.navigation__link--expand:focus,
.navigation__link--expand:hover,
//.navigation__link--groupHeader-link:focus,
.navigation__link--groupHeader-link:hover {
  .navigation__icon--expand {
    color: var(--fillcolor-icons, $white);
  }
}

/* items counters */
.navigation__counterItem {
  background: $pm-primary;
  color: $white;
  font-size: 1.1rem;
  padding: 0.2rem .4em 0; // em value for top gives non rounded value, so rem
  border-radius: 1.1rem;
  line-height: 1;
  height: 1.6rem;
  font-variant: tabular-nums;
  &:empty {
      display: none; // removes a bug on Webkit
  }
}


/* Sub folders */
.navigation__item {
  [data-level="1"] {
    padding-left: 1em;
  }
  [data-level="2"] {
    padding-left: 2em;
  }
}



/* Sub-navigation */
.navigation__sublist {
  margin-left: $padding-left-link;
  overflow: hidden;
  opacity: 1;
  transition: visibility 0s ease, transform .5s ease, opacity .5s ease, max-height .5s ease ;
  transform-origin: top center;
  transform: scale(1,1);
  max-height: 44em;
  visibility: visible;
  transition-delay: 0s;
  &[aria-hidden="true"] {
    display: block;
    opacity: 0;
    max-height: 0;
    visibility: hidden;
    transform: scale(1,0);
    transition-duration: 0s, .25s, .25s, .25s;
    transition-delay: .5s, 0s, 0s, 0s;
  }
}
.navigation__subitem {
  margin-left: .7rem;
}
.navigation__sublink {
  border-left: 2px solid $navigation-fillcolor-icons;
  display: block;
  padding: .75rem 1rem .75rem 1.5rem;
  text-decoration: none;
  color:  var(--color-nav-link, $white);
  &:focus,
  &:hover {
    background: $navigation-hover-bg-color;
    color:  var(--color-nav-link, $pm-global-light);
    text-decoration: none;
  }
  &:hover {
    border-left: 2px solid var(--color-nav-link, rgba($pm-global-light, .5));
  }
  &[aria-current="true"] {
    border-left: 2px solid var(--color-nav-active, $white);
    font-weight: bold;
  }
}


@if $rtl-option == true {
  [dir="rtl"] {
    .navigation__sublist {
      margin-left: 0;
      margin-right: $padding-left-link;
    }
    .navigation__subitem {
      margin-left: 0;
      margin-right: .7rem;
    }
    .navigation__sublink {
      border-left: 0;
      border-right: 2px solid $navigation-fillcolor-icons;
      padding: .75rem 1.5rem .75rem 1rem;
      &:hover {
        border-left: 0;
        border-right: 2px solid var(--color-nav-link, $pm-global-light);
      }
      &[aria-current="true"] {
        border-left: 0;
        border-right: 2px solid var(--color-nav-active, $pm-primary);
      }
    }
  }
}