/* PMP Create Pro v279 — keep primary appearance controls visible at working widths. */

.context-toolbar {
  container-type: inline-size;
  container-name: object-toolbar;
}

.context-toolbar .context-color-control,
.context-toolbar .context-opacity-control {
  scroll-margin-inline: 18px;
}

@container object-toolbar (max-width: 1000px) {
  .context-toolbar .context-opacity-control {
    grid-template-columns: auto 96px 46px;
    gap: 5px;
    padding-inline: 8px;
  }

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

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

  .context-toolbar .context-opacity-control output {
    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;
  }
}

@container object-toolbar (max-width: 720px) {
  .context-toolbar .context-opacity-control {
    grid-template-columns: auto 74px 44px;
  }

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

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