.page-list-item {
  align-items: center;
  background-color: var(--ws-c-n-20);
  border-width: 0;
  color: var(--ws-c-d);
  display: flex;
  font: var(--ws-f-m);
  margin: 0;
  text-decoration: none;

  &.level-0 {
    padding: var(--ws-s-s) var(--ws-s-m);
  }

  &.level-1 {
    padding: var(--ws-s-s) var(--ws-s-m) var(--ws-s-s) var(--ws-s-xl);
  }

  &.level-2 {
    padding: var(--ws-s-s) var(--ws-s-m) var(--ws-s-s) var(--ws-s-3xl);
  }

  &.level-3 {
    padding: var(--ws-s-s) var(--ws-s-m) var(--ws-s-s) var(--ws-s-4xl);
  }
}

.page-list-item:hover,
.page-list-item:focus {
  background-color: var(--ws-c-n-60);
  outline: none;
}

.page-list-item:active {
  background-color: var(--ws-c-n-80);
}

.page-list-item--active {
  border-left: 4px solid var(--ws-c-p);

  &.level-0 {
    padding-left: calc(var(--ws-s-m) - 4px);
  }

  &.level-1 {
    padding-left: calc(var(--ws-s-xl) - 4px);
  }

  &.level-2 {
    padding-left: calc(var(--ws-s-3xl) - 4px);
  }

  &.level-3 {
    padding-left: calc(var(--ws-s-4xl) - 4px);
  }
}
