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

/// Navtree

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

@use '@lavalogic/scss-lib' as lib;
@use 'spacing';
@use 'corners';
@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
/// -------------------

.subnav {
  position: relative;
  z-index: z-index.$secondarynav;
  padding: 0;
  background-color: colours.$ui-white;
  border-radius: corners.$base;
}

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

.subnav__list {
  @include lib.resets-list;
  transform-origin: top;
  // animation: test 0.2s ease;
  // display: none;
  background-color: colours.$ui-white;
  border-radius: corners.$base;

  & svg {
    fill: colours.$ui-four;
  }
}
/// -------------------
/// Navtree item
/// -------------------

.subnav__item {
  // background-color: $nav-secondary;
  border-bottom: 1px solid colours.$ui-two;

  &:last-child {
    border-bottom: none;
  }
  // &:last-of-type {
  //   border-bottom: none;
  // }
}

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

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

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

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

.subnav__link-text {
  display: block;
  font-size: 14px;
  display: flex;
  flex: 1;
  justify-content: center;
  // margin-left: spacing.$sm;
}

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

.subnav__icn {
  margin-right: spacing.$md;
  // display: block;
  justify-content: flex-end;
  margin-left: auto;
  margin-right: 0;
  // .navtree--expanded & {
  // }

  // &--expand {
  //   display: none;

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

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