@import "./../../../styles/global.scss";

/* Used to detect in JavaScript if apps have loaded styles or not. */
:root {
  --reach-menu-button: 1;
}

[data-reach-menu],
[data-reach-menu-popover] {
  display: block;
  position: absolute;
}

[data-reach-menu][hidden],
[data-reach-menu-popover][hidden] {
  display: none;
}

[data-reach-menu-list],
[data-reach-menu-items] {
  display: block;
  white-space: nowrap;
  border: solid 1px hsla(0, 0%, 0%, 0.25);
  background: hsla(0, 100%, 100%, 0.99);
  outline: none;
  /* padding: 1rem 0; */
  font-size: 90%;
}

[data-reach-menu-item] {
  display: block;
  user-select: none;
}

/*
 The dom structure of a MenuLink is reach-menu-item > a,
 so to target all items we can use `data-reach-menu-item`
*/
[data-reach-menu-item] {
  /*
    These are styled in one rule instead of something like a[data-reach-menu-item]
    and li[data-reach-menu-item] so that apps don't have to fight specificity and
    can style both li and a menu items with one rule,
    ie: `[data-selected] { background: red; }`.
    Otherwise they'd have to define two styles, one for a and one for li.
  */

  /* reach-menu-item */
  cursor: pointer;

  /* a */
  display: block;
  color: inherit;
  font: inherit;
  text-decoration: initial;

  /* both */
  padding: 10px 20px;
}


[data-reach-menu-item][aria-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.mobile-header {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 2rem;
}

.mobile-header__username-container {
  display: flex;
  align-items: center;
}

.mobile-header__menu-list {
  display: flex;
  flex-direction: column;
  background-color: $white;
  box-shadow: 0px 0px 12px 2px $grey-medium;
}



.mobile-header__navlink {
  display: block;
  padding: 1rem;

  &.mobile-header__navlink--active {
    color: $dark-blue;
    background-color: $grey-light;
  }
}

.mobile-header__navlink[data-reach-menu-item][data-selected] {
  text-decoration: underline;
}

.mobile-header__user-info {
  display: flex;
  align-items: space-between;
  justify-content: space-between;
}

.mobile-header__user-info .logout-button {
  margin: 0;
  padding: 0;
  font-size: 15px;
}


.mobile-header__menu-button {
  background-color: $white;
  border: none;
  padding: 1px 6px;
}

.mobile-header__user-text {
  font-size: 90%;
}




@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.slide-down[data-reach-menu-list],
.slide-down[data-reach-menu-items] {
  border-radius: 5px;
  animation: slide-down 0.5s ease;
}



// use in tandem with NavigationBar - this disappears for larger screen sizes
@media (min-width: 1024px) {
  .mobile-header {
    display: none;
  }

 }