.toggler {
  border: none;
  color: white;
  background-color: rgba(21, 144, 251, 0.8);
  padding: 5px 10px;
  font-size: 1em;

  &:hover {
    color: white;
    background-color: rgba(19, 105, 210, 0.8);
  }
  i {
    transition: transform 0.2s ease;
  }
  .show {
    transform: rotate(-180deg);
  }
}

.content {
  position: absolute;
  width: 100%;
  padding: 10px;
  background-color: white;
  box-shadow: 0 0 5px var(--border-color);
  overflow-y: auto;
  visibility: visible;
  height: 100vh;
  transition: all 0.1s ease-in-out;

  &.hidden {
    height: 0;
    visibility: hidden;
  }

  .path {
    padding: 5px 10px;
    border-top: solid var(--border-color) 1px;
    border-bottom: solid var(--border-color) 1px;
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: white;

    ol {
      list-style: none;

      li {
        display: inline-block;

        a {
          padding: 5px 10px;
          font-size: 1em;
        }
      }
    }
  }

  .list {
    ul {
      display: flex;
      flex-direction: column;
      align-items: center;

      li {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;

        a {
          flex: 1;
          text-align: center;
          font-size: 2em;

          &.pager {
            flex: 2;
            font-size: 4em;
            color: #aaa;
          }

          &.pager:hover {
            color: var(--hover-color);
          }
        }
      }
    }
  }
}