/* Crisp, compact PS toolbar chrome. Canvas pixels are handled by the renderer. */
.ie-ps {
  --ie-ink: #e4e4e4;
  --ie-muted: #c1c1c1;
  -webkit-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}
.ie-ps .ie-svg { shape-rendering: geometricPrecision; }
.ie-ps .ie-tools {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #747474 #454545;
}
.ie-ps .ie-tool {
  color: #d7d7d7;
  cursor: default;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.ie-ps .ie-tool .ie-svg {
  width: 19px;
  height: 19px;
  filter: none;
  opacity: 1;
}
.ie-ps .ie-tool:hover { color: #f0f0f0; background: #525252; }
.ie-ps .ie-tool.is-active { color: #f7f7f7; background: #353535; border-color: #747474; }
.ie-ps .ie-tool:focus-visible { outline: 1px solid #c3d9ef; outline-offset: -2px; }
.ie-ps .ie-tools .ie-tool-corner {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border: 0;
  cursor: default;
}
.ie-ps .ie-tools .ie-tool-corner:after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  border: 0;
  border-left: 4px solid transparent;
  border-bottom: 4px solid #d0d0d0;
}
.ie-ps .ie-options-tool { color: #dfdfdf; }
.ie-ps .ie-options-tool .ie-svg { width: 19px; height: 19px; }
.ie-ps .ie-tool-flyout {
  min-width: 198px;
  max-width: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 210;
  background: #484848;
  border: 1px solid #707070;
  box-shadow: 2px 3px 8px #0006;
  padding: 3px 0;
}
.ie-ps .ie-tool-flyout button {
  display: grid;
  grid-template-columns: 8px 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 3px 9px 3px 5px;
  color: #e3e3e3;
  font: 12px/20px Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  text-align: left;
  cursor: default;
  white-space: nowrap;
  border-radius: 0;
}
.ie-ps .ie-tool-flyout .ie-svg { width: 18px; height: 18px; }
.ie-ps .ie-tool-flyout .ie-tool-current { display: block; text-align: center; font-size: 12px; }
.ie-ps .ie-tool-flyout kbd { color: #d0d0d0; margin: 0 0 0 14px; font: 11px Arial, sans-serif; }
.ie-ps .ie-tool-flyout button:hover,
.ie-ps .ie-tool-flyout button.is-hovered,
.ie-ps .ie-tool-flyout button:focus-visible { color: #fff; background: #626262; outline: 0; }
.ie-ps .ie-ruler-corner { color: #cacaca; }
.ie-ps .ie-panel-tabs > button { color: #d0d0d0; }
.ie-ps .ie-panel-tabs > button.is-active { color: #fff; }
.ie-ps .ie-options-help,
.ie-ps .ie-property-panel small,
.ie-ps .ie-bottom { color: #c1c1c1; }
@media (max-height: 820px) {
  .ie-ps .ie-tool .ie-svg { width: 18px; height: 18px; }
}

/* Layer commands follow the traditional dark editing workspace. */
.ie-layer-context{position:absolute;z-index:140;width:236px;padding:5px 0;overflow:auto;background:#414141;border:1px solid #222;box-shadow:0 4px 16px #0007;border-radius:3px;color:#ededed;font:12px Arial,sans-serif}
.ie-layer-context button{display:block;width:100%;min-height:26px;padding:4px 22px;text-align:left;color:inherit;background:transparent;border:0;border-radius:0;cursor:pointer;white-space:nowrap}
.ie-layer-context button:hover:not(:disabled),.ie-layer-context button:focus-visible{background:#2f70a9;outline:0}
.ie-layer-context button:disabled{color:#929292;cursor:default}
.ie-layer-context hr{border:0;border-top:1px solid #5b5b5b;margin:4px 8px}

/* Photoshop F screen modes belong to the currently opened editor. */
.ie-editor[data-ps-screen-mode="1"],.ie-editor[data-ps-screen-mode="2"] { position:fixed; inset:0; z-index:95; width:100vw; height:100vh; border-radius:0; }
.ie-editor[data-ps-screen-mode="2"] .ie-menubar { display:none; }