/* MOC Block Renderer */

/* Container */
.mocblockRenderer-container {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  cursor: default /*!important */;
  background:rgba(255, 255, 255, 0)
}
.mocblockRenderer-container img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #363333;
  border-radius: 8px;
  transition: width 0.15s cubic-bezier(.4,0,.2,1);
  cursor: default /*!important */;
}
.mocblockRenderer-userselect-none {
  user-select: none /*!important */;
}
/* .mocblockRenderer-container.has-width,
.mocblockRenderer-container.has-width img {
  width: attr(data-width px);
  max-width: 100%;
} */

/* Editing Mode */
.mocblockRenderer-editing-outline {
  box-shadow: 0 0 0 3px var(--color-accent, #5b9aff) /*!important */;
  border-radius: 6px;
  z-index: 20;
  transition: box-shadow 0.2s;
}
.mocblockRenderer-overlay {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  pointer-events: none  /*!important */;
  z-index: 15;
  transition: background 0.2s;
}
.mocblockRenderer-resize-handle {
  position: absolute;
  top: 0;
  right: 10px;
  width: 8px;
  height: 50%;
  margin-top: 25%;
  cursor: ew-resize /*!important */;
  background: var(--background-modifier-hover, rgba(200,200,200,0.25));
  border-radius: 8px;
  z-index: 20;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 4px 0 var(--background-modifier-box-shadow, rgba(0,0,0,0.07));
}
.mocblockRenderer-resize-handle:hover {
  background: var(--background-modifier-active-hover, rgba(220,220,220,0.5));
  box-shadow: 0 0 8px 0 var(--background-modifier-box-shadow, rgba(0,0,0,0.12));
}

/* Markers (pins, polylines) */
svg.moc-overlay {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none  /*!important */;
}

.mocblockRenderer-marker-pin {
	position: absolute;
	transform: translate(-50%, -50%);
	cursor: pointer /*!important */;
	pointer-events: auto /*!important */;
}
.mocblockRenderer-marker-pin svg {
	width: 24px;
	height: 24px;
	fill: var(--text-normal);
	pointer-events: auto  /*!important */;
}

.mocblockRenderer-marker-polyline {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none /*!important */;
}
svg.moc-overlay polygon {
  pointer-events: auto /*!important */;
  cursor: pointer /*!important */;
}
.mocblockRenderer-polygon-preview {
  stroke: var(--color-accent, #5b9aff);
  stroke-width: 2;
  fill: var(--interactive-accent-hover, rgba(90, 150, 255, 0.15));
  opacity: 0.5;
}

/* Action Buttons */
.mocblockRenderer-actions-buttons {
  position: absolute;
  top: 30px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.mocblockRenderer-actions-buttons button {
  background: var(--background-modifier-active-hover, rgba(0, 0, 0, 0.9));
  color: var(--text-on-accent, white);
  border: none;
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 12px;
}
.mocblockRenderer-actions-buttons button:hover {
  background: rgba(0, 0, 0, 0.9);
  color: white;
  opacity: 1;
}


/* Settings Tab */

/* Marker Styles */
.mocblock-settings-style-toggle {
  margin-right: 0.5em;
  cursor: pointer /*!important */;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  font-size: 1em;
  /* margin-right: 0.7em; */
}
.mocblock-settings-style-details {
  margin-left: 2em;
  margin-top: 0.5em;
  border-left: 2px solid var(--background-modifier-border);
  padding-left: 1em;
  display: none;
}
.mocblock-settings-style-row {
    display: flex;
    align-items: center;
    margin-bottom: 0.5em;
}
.mocblock-settings-style-title {
    font-weight: bold;
}

.mocblock-pin-link svg,
.mocblock-pin-link path,
.mocblock-pin-link g {
    pointer-events: none;
}

/* Multifunctional styles: used everywhere */
.mocblock-trash-hover:hover {
  color: var(--color-red, red) /*!important */;
}