.page-toolbar {
  position: sticky;
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
  bottom: 0;
  padding: 1rem 0;
  z-index: 8;
  border-radius: 3rem 3rem 0 0;
}

.page-toolbar--workflow,
.page-toolbar--collection {
  position: fixed;
  width: 8rem;
  margin-left: -4rem;
  left: 50%;
}

.page-toolbar--world {
  position: fixed;
  width: 37.5rem;
  left: 50%;
  margin-left: -18.75rem;
}

.page-toolbar--work {
  max-width: 60rem;
}

.page-toolbar__item + .page-toolbar__item {
  margin-left: 0.5rem;

  @media (max-width: 39.95em) { margin: 0; }
}

.page-toolbar__content {
  padding: 0.5rem;
  background: linear-gradient(135deg, var(--color-bg--secondary-glint) 0%, var(--color-bg--secondary-glint) 80%) var(--color-bg--main-thick);
  border-radius: 1.6rem;
  display: flex;
  justify-content: space-around;

  @media (min-width: 40em) { margin: 0 auto; }
}

.page-toolbar--placeholder .page-toolbar__action {
  opacity: 0;
}

.page-toolbar__item {
  display: flex;
  width: 100%;

  &:last-child .page-toolbar__action { margin-right: 0; }
}

.page-toolbar__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  background: none;
  border: 0;
  padding: 0.5rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
  font-size: var(--font-size-x-small);
  font-weight: 500;
  border-radius: 1.2rem;

  &::before {
    filter: var(--colorize-ink);
    content: "";
    width: 4rem;
    height: 2.5rem;
    background: center / 2.2rem no-repeat;
  }
}

.page-toolbar__button {
  border-radius: 1.2rem;
}

.page-toolbar__action--selected {
  background-color: var(--color-bg--main);
  color: var(--color-tertiary);

  &::before { filter: var(--colorize-purple); }
}

.page-toolbar__action-hotkey {
  color: var(--color-txt);
}

.page-toolbar__draft {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
}

.page-toolbar__draft-badge {
  padding: 0.2em 0.6em;
  font-size: var(--font-size-xx-small);
  text-transform: uppercase;
  background: var(--color-tertiary);
  color: var(--color-txt--reversed);
  border-radius: 1.6rem;
}

.page-toolbar__action--draft {
  &::before { display: none; }
}

.page-toolbar__menu {
  right: 0;
  bottom: 6rem;

  @media (min-width: 40em) {
    right: auto;
    left: 50%;
  }
}

.page-toolbar__menu--more {
  left: auto;

  @media (min-width: 40em) { right: -10rem; }
}

.page-toolbar__menu--add-people {
  left: auto;
  bottom: 6rem;

  @media (min-width: 40em) {
    right: 20rem;
    width: 36rem !important;
  }
}

.page-toolbar__pickers {
  position: sticky;
  bottom: 2rem;
  z-index: 10;
}

.page-toolbar__pickers--collection {
  position: fixed;
  width: 100%;

  .popup-menu {
    left: 20% !important;
    right: auto !important;
  }
}

.page-toolbar__action--reply::before { background-image: url("/assets/icons/reply-5d02f10f.svg"); }
.page-toolbar__action--laterbox::before { background-image: url("/assets/icons/laterbox-a63ddf86.svg"); }
.page-toolbar__action--asidebox::before { background-image: url("/assets/icons/asidebox-35021bb6.svg"); }
.page-toolbar__action--asidebox--outlined::before { background-image: url("/assets/icons/asidebox--outlined-05a7b3c7.svg"); }
.page-toolbar__action--forward::before { background-image: url("/assets/icons/forward-d10635a7.svg"); }
.page-toolbar__action--comment::before { background-image: url("/assets/icons/comment-d1848f94.svg"); }
.page-toolbar__action--more::before { background-image: url("/assets/icons/more-b85a2fb5.svg"); }
.page-toolbar__action--bubbles::before { background-image: url("/assets/icons/bubbles-105ae53a.svg"); }
.page-toolbar__action--work::before { background-image: url("/assets/icons/comment-d1848f94.svg"); }
.page-toolbar__action--trash::before { background-image: url("/assets/icons/trash-71dc6f08.svg"); }
.page-toolbar__action--edit-value::before { background-image: url("/assets/icons/edit-value-fe267037.svg"); }

/* Handle mega-large accessibility text size settings so toolbar stays on page */
[data-text-size=xxxlarge],
[data-text-size*=accessibility-] {
  .page-toolbar__action {
    @media (max-width: 39.95em) { width: 18vw; }
  }
}