// site (bonsai/garden) nav – which houses the 'svg-graph'

.site-nav {

display: none;
width: 100%;

&.nav-open {
  display: flex;
  height: 100vh;
  width: 100vw;
}

@include mq(md) {
  display: block;
  flex: 1 1 auto;
}

header {
  @include fs-5;
  display: flex;
  justify-content: flex-start;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 4;
  padding: $sp-2;
  color: $grey-dk-000;
  cursor: pointer;
  user-select: none;
}

footer {
  position: absolute;
  width: 100%;
  z-index: 4;
  bottom: 0;
  left: 0;
  padding: $sp-3;
}

}

.dropdown {

border: none;
background: none;

}

.dropdown:hover .dropdown-content {

display: flex;
flex-direction: column;

}

.dropdown-content {

display: none;

}

.dropdown-btn {

@include fs-6;
display: flex;
cursor: pointer;
user-select: none;
padding: $sp-2;
border: none;
background: none; 
display: table-cell;
vertical-align: middle;
filter: drop-shadow(0 0 0.8mm $drop-shadow-blue);

}

.dropbtn {

@include fs-6;
cursor: pointer;
user-select: none;
padding: $sp-2;
transition: all .2s ease-in-out;
border: none;
background: none; 
display: table-cell;
vertical-align: middle;
transition: all .2s ease-in-out;

&:hover {
  transform: scale(1.5); 
}

#posts-emoji-span {
  filter: drop-shadow(0 0 0.8mm $drop-shadow-purple);
}

#recent-emoji-span {
  filter: drop-shadow(0 0 0.8mm $drop-shadow-blue);
}

#stat-tags-emoji-span {
  filter: drop-shadow(0 0 0.8mm $drop-shadow-brown);
}

}

.site-nav-btn {

@include fs-6;
display: flex;
cursor: pointer;
user-select: none;
padding: $sp-2;
transition: all .2s ease-in-out;
border: none;
background: none; 
display: table-cell;
vertical-align: middle;

&:hover {
  transform: scale(1.5); 
}

#search-emoji-span {
  filter: drop-shadow(0 0 0.8mm $drop-shadow-brown);
}

#visited-emoji-span {
  filter: drop-shadow(0 0 0.8mm $drop-shadow-orange);
}

}

.delete-btn {

@include fs-3;
display: flex;
cursor: pointer;
user-select: none;
transition: all .2s ease-in-out;
border: none;
background: none; 
display: table-cell;
vertical-align: middle;

&:hover {
  transform: scale(1.5); 
}

#delete-emoji-span {
  filter: drop-shadow(0 0 0.8mm $drop-shadow-red);
}

}

// visited nav (user-path)

.visited-nav {

z-index: 3;
position:relative;
height: 100%;
width: 100%;
padding-top: $sp-10;
padding-bottom: $sp-10;
overflow-y: scroll;

.visited-nav-list {
  padding-left: $sp-1 !important;
  list-style: none;

  .visited-nav-list-item {
    @include fs-4;
    display: flex;
    width: 80%;
    padding: $sp-2;
    margin-top: $sp-2;
    margin-bottom: $sp-2;
    border-radius: 16px;
    // both animation and transform rely on this transition setting (according to: https://stackoverflow.com/a/20903041)
    transition: all 0.15s ease-in-out;

    &:hover {
      transform: scale(1.1); 
    }

    &::before {
      content: "đŸ¥¾";
    }

    button {
      justify-content: flex-end;
    }
  }
}

}

.hide {

position: absolute !important;
top: -9999px !important;
left: -9999px !important;

// animation-name: animateShow;
// animation-duration: 100ms;
// animation-timing-function: ease-in-out;

}

// @keyframes animateHide { // 0% { // opacity: 1; // }

// 100% { // opacity: 0; // } // }

// .show { // animation-name: animateShow; // animation-duration: 250ms; // animation-delay: calc(var(–animation-show-order) * 100ms); // animation-fill-mode: both; // animation-timing-function: ease-in-out; // }

// // from: css-tricks.com/different-approaches-for-creating-a-staggered-animation/#how-about-custom-properties // @keyframes animateShow { // 0% { // opacity: 0; // }

// 100% { // opacity: 1; // } // }