#utopy-editor-tools {
  position: fixed;
  z-index: 80;
  display: block;
  width: 274px;
  height: 64px;
  padding: 12px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
}

#utopy-editor-tools.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s;
}

.utopy-editor-tools__surface {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 250px;
  height: 40px;
  padding: 4px;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 12px;
  background: rgba(45, 45, 45, 0.8);
  box-shadow: 0 0 6px rgba(5, 5, 5, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

[data-utopy-preview-frame="true"] {
  /* 24 px above the preview and 24 px before the visible 40 px panel. */
  height: max(0px, calc(100% - 100px)) !important;
  align-self: flex-start;
  margin-top: 24px;
}

.utopy-editor-tool {
  position: relative;
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.95);
  background: transparent;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease;
}

.utopy-editor-tool:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
}

.utopy-editor-tool:active:not(:disabled) {
  background: rgba(255, 255, 255, 0.10);
}

.utopy-editor-tool:focus-visible {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}

.utopy-editor-tool.is-active,
.utopy-editor-tool.is-active:hover,
.utopy-editor-tool.is-active:active {
  color: rgba(5, 5, 5, 0.95);
  background: rgba(255, 255, 255, 0.95);
}

.utopy-editor-tool img {
  display: block;
  max-width: none;
  pointer-events: none;
}

.utopy-editor-tool.is-active > img {
  filter: brightness(0) invert(0.0196078431);
}

/* The selected pointer is exported with the inverted icon from Figma. */
.utopy-editor-tool[data-tool="pointer"] > img {
  filter: brightness(0) invert(1);
}

.utopy-editor-tool[data-tool="pointer"].is-active > img {
  filter: none;
}

.utopy-editor-tool:disabled {
  background: transparent;
  cursor: default;
}

.utopy-editor-tool:disabled > img {
  opacity: 0.4;
}

.utopy-editor-tools__divider {
  flex: 0 0 1px;
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.10);
}

.utopy-editor-tools__swatch {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #1853eb;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #utopy-editor-tools,
  .utopy-editor-tool {
    transition: none;
  }
}