/* PMP Create Pro v280 — reserve real space for responsive toolbar navigation. */

@media (max-width: 1180px) {
  .workspace {
    --object-toolbar-nav-clearance: 146px;
  }

  .context-toolbar.has-overflow {
    width: calc(100% - var(--object-toolbar-nav-clearance));
    max-width: calc(100% - var(--object-toolbar-nav-clearance));
    align-self: flex-start;
    padding-right: 12px;
    box-shadow: inset -26px 0 22px -26px rgba(14,35,43,.72), 0 2px 8px rgba(16,35,44,.12);
  }

  .context-toolbar .context-color-title {
    grid-template-columns: 40px;
  }

  .context-toolbar .context-color-title > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .context-toolbar .context-opacity-control {
    grid-template-columns: auto 68px 44px;
    gap: 4px;
    padding-inline: 6px;
  }

  .context-toolbar .context-opacity-range[type="range"] {
    width: 68px;
  }

  .context-toolbar .context-opacity-number {
    width: 44px;
    min-width: 44px;
  }
}

@media (max-width: 620px) {
  .workspace {
    --object-toolbar-nav-clearance: 146px;
  }

  .context-toolbar .context-color-control input[type="color"],
  .context-toolbar .context-text-color-control input[type="color"] {
    width: 74px;
    min-width: 74px;
  }

  .context-toolbar .context-opacity-control {
    grid-template-columns: auto 56px 42px;
  }

  .context-toolbar .context-opacity-range[type="range"] {
    width: 56px;
  }

  .context-toolbar .context-opacity-number {
    width: 42px;
    min-width: 42px;
  }
}