/// ----------------------------------------------------------------------

/// Navtree

/// ----------------------------------------------------------------------

@use '@lavalogic/scss-lib' as lib;
@use 'spacing';
@use 'colours';
@use 'transitions';
@use 'animations';
@use 'typography';
@use 'z-index';
@use 'breakpoints';
@use "keyframes";

/// -------------------
/// Navtree config
/// -------------------

$nav-left: spacing.$md * 4;
$nav-height: 70px;
$nav-primary: #515b65;
$nav-secondary: #414952;

/// -------------------
/// Navtree selectors
/// -------------------

.navtree {
  position: relative;
  z-index: z-index.$nav;
  padding: 0;
  background-color: colours.$ui-two;
  transition: width 0.3s ease;

  &--compact {
    width: 75px;
  }

  &--expanded {
    width: 240px;
  }
}

/// -------------------
/// Navtree selectors
/// -------------------

.navtree__list {
  @include lib.resets-list;
  transform-origin: top;
  animation: test 0.2s ease;
  display: none;
  background-color: $nav-primary;

  & svg {
    fill: #fff;
  }

  &--active {
    display: block;
  }

  &--expand-x {
    position: absolute;
    top: 0;
    // bottom: 0; //XBF CHANGE
    animation: fadeInLeft 0.2s forwards ease;
    // height: 100%; //XBF CHANGE TO MIN-HEIGHT
    min-height: 100%;
    width: 100%;
  }
}
/// -------------------
/// Navtree item
/// -------------------

.navtree__item {
  & .navtree__list--expand-y & {
    background-color: $nav-secondary;
  }
}

/// -------------------
/// Navtree link
/// -------------------

.navtree__link {
  @include lib.resets-style;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  line-height: 1;
  font-size: typography.$base-font-size;
  font-family: typography.$font-family--alt;
  padding: spacing.$md spacing.$lg;
  text-decoration: none;
  color: map-get(colours.$ui, 'one');
  text-align: left;
  transition: background-color 0.3s ease;
  cursor: pointer;

  &:focus,
  &:hover {
    outline: none;
  }
}

/// -------------------
/// Navtree link
/// -------------------

.navtree__link-text {
  display: none;

  .navtree--expanded & {
    display: block;
    font-size: 14px;
    margin-right: spacing.$sm;
  }
}

/// -------------------
/// Navtree icon
/// -------------------

.navtree__icn {
  .navtree--expanded & {
    margin-right: spacing.$md;
  }

  &--expand {
    display: none;

    .navtree--expanded & {
      display: block;
      margin-left: auto;
      margin-right: 0;

      & svg {
        width: unset;
        fill: rgba($color: #000000, $alpha: 0.3);
      }
    }
  }
}
