/* Global variables */
:root {
  --nav-color-mono-light: #fff;
  --nav-color-mono-dark: #6e6e6e;
  --nav-color-mono-dark-tint: #44425d;
  --nav-color-mono-pale: #f2f2f2;
  --nav-color-primary: #57d5c8;

  --nav-offset-top: 66px;
  --nav-width-expanded: 295px;
  --nav-width-contracted: 88px;
  --nav-padding-x: 20px;
  --nav-padding-y: 16px;

  --nav-icon-size: 30px;
}



/* General resets */
.page-wrapper {
  background-color: #f0f0f7;
  position: relative;
}
.login .page-wrapper {
  background-color: white;
}

.sidebar {
  background-color: var(--nav-color-mono-light);
  position: relative;
  z-index: 100;
}


@media screen and (min-width: 960px) {

  .side-logo {
    background-color: var(--nav-color-mono-light);
  }

  .sidebar {
    background-color: unset;
    min-height: 100vh;
  }

  .adj-wrapper .sidebar {
    height: unset;
    overflow: unset;
  }

  .right-content {
    width: calc(100% - var(--nav-width-expanded));
  }

  .right-content .inner-content {
    margin-left: 0;
  }

  .adj-wrapper .right-content .inner-content {
    margin-left: calc(0px - var(--nav-width-expanded) + var(--nav-width-contracted));
  }

  body:not(.modal-open) .page-wrapper:not(.adj-wrapper) .sidebar,
  body:not(.modal-open) .adj-wrapper .sidebar:hover,
  body:not(.modal-open) .adj-wrapper .sidebar:focus-within {
    position: relative;
    z-index: 2001;
  }

  .inner-content {
    position: relative;
    z-index: 100;
  }
}



/* Main layout */
.global-nav {
  background-color: var(--nav-color-mono-light);
  color: var(--nav-color-mono-dark);
  position: relative;
}

.global-nav__inner {
  align-content: start;
  display: grid;
  gap: 3em;
  padding: 0 var(--nav-padding-x);
}

@media (min-width: 960px) {

  .global-nav {
    box-shadow: 0 .75em .75em 0 rgba(0, 0, 0, 0.15);
    height: calc(100% - var(--nav-offset-top));
    min-height: calc(100vh - var(--nav-offset-top));
    overflow: hidden;
    position: relative;
    width: var(--nav-width-expanded);
  }

  .global-nav:before {
    bottom: 100%;
    box-shadow: 0 0 .75em 0 rgba(0, 0, 0, .15);
    content: '';
    height: 5em;
    left: -1em;
    position: absolute;
    right: -1em;
  }

  .global-nav__inner {
    min-height: calc(100vh - var(--nav-offset-top) - var(--nav-padding-y));
    padding: var(--nav-padding-y) var(--nav-padding-x);
  }

  .adj-wrapper .global-nav:not(:hover):not(:focus-within) {
    width: var(--nav-width-contracted);
  }
}



/* Bottom actions */
.global-nav__bottom-actions {
  align-self: end;
}

@media (max-width: 959px) {

  .global-nav__bottom-actions {
    display: none;
  }
}



/* Link list */
.global-nav__link-list {
  align-items: start;
  display: grid;
  gap: .25em;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 960px) {

  .global-nav__link-list {
    width: calc(var(--nav-width-expanded) - (var(--nav-padding-x) * 2));
  }
}



/* Submenu link list */
.global-nav__link-list.global-nav__link-list--submenu {
  list-style: none;
  padding: .5em 0 .5em var(--nav-icon-size);
}

@media (min-width: 960px) {

  .page-wrapper.adj-wrapper .global-nav:not(:hover):not(:focus-within) .global-nav__link-list.global-nav__link-list--submenu {
    display: none;
  }
}



/* Icon link */
.global-nav__icon-link {
  align-items: center;
  background-color: var(--nav-color-mono-light);
  border-radius: .3em;
  border: 0;
  color: var(--nav-color-mono-dark-tint);
  display: grid;
  font-size: 14px;
  font-weight: 300;
  gap: .5em;
  grid-template-columns: var(--nav-icon-size) 1fr;
  padding: .5em;
  text-align: left;
  width: 100%;
}

.global-nav__icon-link:hover,
.global-nav__icon-link:focus-visible {
  background-color: var(--nav-color-mono-pale);
  color: var(--nav-color-mono-dark-tint);
  text-decoration: none;
}

.global-nav__icon-link__text {
  color: var(--nav-color-mono-dark);
}

.global-nav__link-list__item.global-nav__link-list__item--is-active > .global-nav__icon-link {
  color: var(--nav-color-primary);
  position: relative;
}

@media (min-width: 960px) {

  .global-nav__link-list__item.global-nav__link-list__item--is-active > .global-nav__icon-link:after {
    background-color: var(--nav-color-primary);
    bottom: 0;
    content: '';
    position: absolute;
    top: 0;
    width: .4em;
  }

  .page-wrapper.adj-wrapper .global-nav:not(:hover):not(:focus-within) .global-nav__icon-link:focus,
  .page-wrapper.adj-wrapper .global-nav:not(:hover):not(:focus-within) .global-nav__icon-link:hover {
    background-color: var(--nav-color-mono-light);
  }

  .page-wrapper.adj-wrapper .global-nav:not(:hover):not(:focus-within) .global-nav__icon-link__text {
    display: none;
  }

  .page-wrapper:not(.adj-wrapper) .global-nav__link-list__item.global-nav__link-list__item--is-active > .global-nav__icon-link:after,
  .adj-wrapper .global-nav:hover .global-nav__link-list__item.global-nav__link-list__item--is-active > .global-nav__icon-link:after,
  .adj-wrapper .global-nav:focus-within .global-nav__link-list__item.global-nav__link-list__item--is-active > .global-nav__icon-link:after {
    right: calc(0px - var(--nav-padding-x));
  }

  .adj-wrapper .global-nav .global-nav__link-list__item.global-nav__link-list__item--is-active > .global-nav__icon-link:after {
    right: calc(var(--nav-width-expanded) - var(--nav-width-contracted) - var(--nav-padding-x));
  }
}

/* Fix Safari with huge menu icons */
.global-nav__icon-link svg,
.global-nav__icon-link img {
  width: 100%;
  height: auto;
}

.modal {
    background: rgba(0,0,0,0.5);
}
.modal-backdrop {
    display: none;
}