/* =========================================================
   ROOTS
   ========================================================= */
.uiinlineedit,
.uiinlineimage,
.photo-content {
  position: relative;
}

.uiinlineedit.uie-active,
.photo-content.uie-image-active {
  position: relative;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.uie-btn {
  width: 32px;
  height: 32px;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  line-height: 1;

  border: none;
  background: none;
}

.uie-btn-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.uie-btn svg {
  display: block;
}

.uie-toolbar-main .uie-btn,
.uie-toolbar-image .uie-btn {
  border-radius: var(--radius-control, 6px);
  color: var(--color-text-muted, #64748b);
  transition:
    background-color var(--transition-fast, 160ms ease),
    color var(--transition-fast, 160ms ease);
}

.uie-toolbar-main .uie-btn:hover,
.uie-toolbar-main .uie-btn:focus-visible,
.uie-toolbar-image .uie-btn:hover,
.uie-toolbar-image .uie-btn:focus-visible {
  background: var(--color-primary-soft, #eff6ff);
  color: var(--color-primary, #2563eb);
  outline: none;
}

.uie-toolbar-main .uie-btn:focus-visible,
.uie-toolbar-image .uie-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--color-focus, #60a5fa);
}

.uie-toolbar-main .uie-btn:active,
.uie-toolbar-image .uie-btn:active {
  background: var(--color-surface-active, #dbeafe);
  color: var(--color-primary-active, #1e40af);
}

.uie-toolbar-main,
.uie-toolbar-image {
  border: 1px solid var(--color-border, #cbd5e1);
  border-radius: var(--radius-pill, 999px);
  background: var(--color-surface, #fff);
  background: color-mix(in srgb, var(--color-surface, #fff) 90%, transparent);
  color: var(--color-text, #1f2937);
  box-shadow: var(--shadow-md, 0 4px 12px rgb(15 23 42 / 12%));
  font-family: var(--application-font, Arial, sans-serif);
  padding: 5px;
}

/* =========================================================
   TOOLBAR MAIN
   ========================================================= */
.uie-toolbar-main {
  display: none;
  z-index: 800;
  gap: 3px;
  pointer-events: auto;
}

.uie-toolbar-main.uie-visible {
  display: flex;
}

.uie-toolbar-main.is-vertical {
  flex-direction: column;
  align-items: center;
}

.uie-toolbar-main.is-horizontal {
  flex-direction: row;
  align-items: center;
}

/* top du bloc visible => toolbar dans le div */
.uie-toolbar-main.mode-inline {
  position: absolute;
}

/* top du bloc non visible => toolbar en haut de la fenêtre */
.uie-toolbar-main.mode-fixed {
  position: fixed;
}

/* =========================================================
   TOOLBAR IMAGE
   ========================================================= */
.uie-toolbar-image {
  position: fixed;
  display: none;
  z-index: 850;
  gap: 3px;
  flex-direction: row;
  align-items: center;
  pointer-events: auto;
}

.uie-toolbar-image.uie-visible {
  display: flex;
}

/* =========================================================
   OPTIONAL STATES
   ========================================================= */
.uiinlineedit.uie-active {
  outline: 0;
}

.photo-content.uie-image-active {
  outline: 0;
}