/**
 * Divi Live Copy — frontend toolbar.
 *
 * The toolbar is absolutely positioned inside the tagged element, so the host
 * needs a positioning context. Divi sections and rows are static by default,
 * hence the position rule below.
 */

.dlc-live-copy {
  position: relative;
}

/* The icon stays visible so the element is discoverable, matching the Bricks
   original; hovering the button expands the label beside it.
   Laid out right-to-left so the label grows leftwards and the icon never
   moves — expanding rightwards would push it off the element's edge. */
.dlc-copy-wrapper {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 999;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.dlc-copy-wrapper:hover,
.dlc-copy-wrapper.active-live-copy {
  opacity: 1;
}

.dlc-copy-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #1a1a1a;
  color: #fff;
  cursor: pointer;
  /* Colour only — shifting the button on hover moves it out from under the
     pointer at its edge, which re-fires hover and makes it flicker. */
  transition: background 0.2s ease;
}

.dlc-copy-icon:hover {
  background: #ff5520;
}

.dlc-copy-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.dlc-copy-button {
  max-width: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  line-height: 34px;
  color: #fff;
  background: #1a1a1a;
  /* Sits to the left of the icon, so only that side is rounded. */
  border-radius: 8px 0 0 8px;
  transition: max-width 0.25s ease, padding 0.25s ease;
}

/* Hover is handled entirely in CSS. Driving it from JS mouseover/mouseout
   made the button jitter: mouseout bubbles, so moving the pointer from the
   icon onto the label fired it and collapsed the label mid-hover, which
   re-triggered mouseover — a flicker loop. :hover on the wrapper covers both
   children and never toggles while the pointer stays inside. */
.dlc-copy-wrapper:hover .dlc-copy-button,
.dlc-copy-wrapper.active-live-copy .dlc-copy-button {
  max-width: 180px;
  padding: 0 10px 0 12px;
}

/* Feedback states. */
.dlc-copy-wrapper.is-busy .dlc-copy-icon {
  opacity: 0.6;
  cursor: progress;
}

.dlc-copy-wrapper.is-done .dlc-copy-icon,
.dlc-copy-wrapper.is-done .dlc-copy-button {
  background: #1f9d55;
}

.dlc-copy-wrapper.is-error .dlc-copy-icon,
.dlc-copy-wrapper.is-error .dlc-copy-button {
  background: #c0392b;
}

/* Outline the element being copied so it is obvious what got selected.
   outline, not border — a border would resize the section and shift the page. */
.dlc-live-copy.copying,
.dlc-live-copy.dlc-copied {
  outline-offset: -2px;
}

.dlc-live-copy.copying {
  cursor: progress;
  outline: 2px dashed #ff5520;
}

.dlc-live-copy.dlc-copied {
  outline: 2px solid #1f9d55;
}

@media (prefers-reduced-motion: reduce) {
  .dlc-copy-wrapper,
  .dlc-copy-icon,
  .dlc-copy-button {
    transition: none;
  }
}