$app-bar-width: 24rem;

pragma-menu {
  display: block;
  position: absolute;
  top: 3.5rem;
  left: 0;
  z-index: $pragma-menu-z-index;
  max-width: $app-bar-width;
  width: 100%;
  bottom: 0;
  background: var(--color-brand-dark);
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.10);
  overflow: auto;
  will-change: transform;
  transform: none;
  @include slideAnimation();

  nav {
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    li {
      line-height: 3rem;

      color: var(--color-ui-4);

      .active {
        font-weight: 700;
      }

      &:hover {
        background: var(--color-ui-1-30);
      }
    }
    a {
      position: relative;
      display: block;
      padding: 0 0 0 1.5rem;
      &:link {
        font-weight: normal;
        text-decoration: inherit;
        color: inherit;
        cursor: auto;
      }

      &:focus{
        box-shadow: $focus-highlight-inwards
      }

      &:visited {
        text-decoration: inherit;
        color: inherit;
        cursor: auto;
      }
    }
  }

  .nav-header {
    background: var(--color-ui-1-30);
    box-shadow: inset 0 -1px 0 0 rgba(207, 210, 217, 0.30);
    padding: 0.5rem;
    input {
      width: 100%;
      height: 2rem;
      background: var(--color-ui-1-30);
      border-radius: 4px;
      border: none;
      padding: 0 10px;
      font-style: italic;
      color: var(--color-ui-4);
    }
    input::placeholder {
      color: var(--color-ui-4);
    }
  }
  &[hidden]{
    display: block;
  }
  &.close {
    transform: translateX(-106%);
  }
}

app-menu[aria-hidden="true"] {
  transform: translateX(-24rem);
}