@layer components {
  .page-toolbar {
    --padding-block: 0.5em;
    --padding-inline: 1.1em;

    border-radius: 99rem;
    display: inline-flex;
    margin: var(--block-space-half) auto;
    min-block-size: 3em;
    min-inline-size: 0;
    padding-block: var(--padding-block);
    position: relative;
    transition: background-color 300ms ease;

    &:has(.page-toolbar__container:only-child trix-toolbar[hidden]) {
      opacity: 0;
    }

    .btn {
      --btn-border-color: transparent;
      flex-shrink: 0;
    }
  }

  .page-toolbar.clean {
    .page-toolbar__save {
      --btn-background: var(--color-positive);
      --btn-border-color: var(--color-body);
      --btn-color: var(--color-ink-inverted);
      --outline-color: var(--color-positive);

      img {
        filter: invert(1);

        @media (prefers-color-scheme: dark) {
          filter: invert(0);
        }
      }
    }
  }

  body:has(.page-toolbar.dirty) {
    & .page-toolbar__save {
      --btn-background: var(--color-link);
      --btn-border-color: var(--color-body);
      --btn-color: var(--color-ink-inverted);
      --outline-color: var(--color-link);

      img {
        filter: invert(1);

        @media (prefers-color-scheme: dark) {
          filter: invert(0);
        }
      }
    }
  }

  body:has(.page-toolbar.saving) .page-toolbar__save {
    position: relative;

    > * {
      visibility: hidden;
    }

    &::after {
      --mask: no-repeat radial-gradient(#000 68%,#0000 71%);
      --size: 1.25em;

      -webkit-mask: var(--mask), var(--mask), var(--mask);
      -webkit-mask-size: 28% 45%;
      animation: submitting 1s infinite linear;
      aspect-ratio: 8/5;
      background: currentColor;
      content: "";
      inline-size: var(--size);
      inset: 50%;
      margin-block: calc((var(--size) / 3) * -1);
      margin-inline: calc((var(--size) / 2) * -1);
      position: absolute;
    }
  }

  body:has(.page-toolbar.new) {
    & .page-toolbar {
      .separator { display: none; }

      &:has(.page-toolbar__container trix-toolbar[hidden]:only-child),
      &:has(.page-toolbar__container:empty) {
        opacity: 0;
      }
    }
  }

  .page-toolbar__section {
    align-items: center;
    align-self: stretch;
    display: flex;
    padding-inline: 1.5ch;

    &:not(:last-child) {
      border-inline-end: 1px solid var(--color-ink-light);
    }
  }

  .page-toolbar__toggle-icon {
    --icon-size: 28px;
  }

  .page-toolbar__container:empty,
  .page-toolbar__container:has(trix-toolbar[hidden]):not(:has(trix-toolbar:not([hidden]))) {
    display: none;
  }
}