/* Customizing default cropper ui styles for image editor in v5 */
.ImageEditor {
  .cropper-drag-box {
    @apply bg-white-light;
  }

  .cropper-modal {
    @apply bg-transparent;
  }

  .cropper-center {
    --cropper-center-bg: light-dark(
      theme(colors.primary.600),
      theme(colors.primary.200)
    );
    @apply opacity-100 before:size-3.5 before:rounded-full before:bg-white-light before:shadow-border after:-left-px after:top-[2px] after:size-2.5 after:rounded-full after:bg-[--cropper-center-bg];
  }

  .cropper-line {
    @apply hidden;
  }

  .cropper-face {
    @apply bg-white-light opacity-30 mix-blend-overlay;
  }

  .cropper-view-box {
    @apply opacity-50 outline outline-1 outline-white-light;
  }

  .cropper-dashed {
    @apply border border-white-light opacity-100;
  }

  .cropper-dashed.dashed-v {
    @apply border-y-0;
  }

  .cropper-dashed.dashed-h {
    @apply border-x-0;
  }

  .cropper-bg {
    @apply bg-gray-50 bg-none;
  }

  .cropper-point {
    @apply bg-white-light opacity-100;

    &.point-se {
      @apply before:bg-white-light;
    }
  }

  /* Animation for when hotspot is added */
  @keyframes isAdded {
    from {
      --hotspot-bg: light-dark(
        theme(colors.primary.50),
        theme(colors.primary.800)
      );
      --hotspot-border: light-dark(
        theme(colors.primary.600),
        theme(colors.primary.200)
      );
    }

    to {
      --hotspot-bg: theme(colors.white.light);
      --hotspot-border: light-dark(
        theme(colors.gray.200),
        theme(colors.gray.600)
      );
    }
  }
}

/* Image preview */
.is-imagePreview {
  --icon-button-w: 37px;

  @apply relative grid max-w-[calc(360px-theme(spacing.8))] items-center overflow-hidden [grid-template-areas:'preview_preview_preview''groups_open_edit''message_message_message'] [grid-template-columns:calc(100%-var(--icon-button-w)*2)_auto_auto] before:relative before:h-full before:rounded-t-lg before:border before:border-b-0 before:border-gray-300 before:[grid-area:preview];
}

.ImageEditor-editToggle,
.ImageEditor-open {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs ml-1 mr-[5px] overflow-visible before:btu-icon touch-device:btu-button-sm after:absolute after:-bottom-1 after:-left-1 after:-right-[5px] after:-top-1 after:border after:border-s-0 after:border-gray-300;
}

.ImageEditor-open {
  @apply relative [grid-area:open] before:btu-icon-pencil-ruler after:border-e-gray-200;
}

.ImageEditor-editToggle {
  @apply [grid-area:edit] before:btu-icon-ellipsis after:rounded-ee-lg;
}

.ImageEditor-editTools {
  @apply Dropdown;

  &.is-open {
    @apply Dropdown-is-open;

    [role='menuitem'] {
      @apply Dropdown-item;
    }
  }
}

.ImageEditor-preview {
  @apply relative mx-px mt-px overflow-hidden rounded-t-lg bg-gray-50 [grid-area:preview];
  img,
  canvas {
    --gray-1: light-dark(theme(colors.gray.200), theme(colors.gray.600));
    --gray-2: light-dark(theme(colors.gray.300), theme(colors.gray.500));
    @apply m-auto blokk max-h-[60vh] max-w-full bg-[light-dark(theme(colors.gray.50),_theme(colors.gray.800))] bg-[linear-gradient(45deg,var(--gray-2)_25%,transparent_25%,transparent_75%,var(--gray-2)_75%,var(--gray-2)),linear-gradient(-45deg,var(--gray-2)_25%,transparent_25%,transparent_75%,var(--gray-1)_75%,var(--gray-2))] bg-[length:10px_10px];
  }

  &.is-hidden img {
    @apply hidden;
  }
}

.ImageEditor-preview-loader {
  @apply absolute left-0 top-0 z-[1] hidden size-full rounded-t-lg bg-gray-50/40 after:btu-loader after:absolute after:left-[calc(50%_-_var(--loader-size)_/_2)] after:top-[calc(50%_-_var(--loader-size)_/_2)] after:z-[2] after:size-[--loader-size];
}

.is-imageEditorLoading .ImageEditor-preview-loader {
  @apply blokk;
}

.is-imageEditorReady .ImageEditor-preview-loader {
  @apply hidden after:content-none;
}

/* Focus UI & controls */
.ImageEditor-focusToggle {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs relative my-1 ml-[5px] mr-1 overflow-visible before:btu-icon before:btu-icon-focus touch-device:btu-button-sm after:absolute after:-bottom-1 after:-left-[5px] after:-right-1 after:-top-1 after:box-border after:rounded-es-lg after:border after:border-e-0 after:border-gray-300;
}

/* size groups dropdown */
.ImageEditor-groups {
  @apply flex items-center [grid-area:groups];

  .ComboInput {
    @apply pointer-events-none relative !inline-flex h-9 min-w-[auto] rounded-none border-x-gray-200 focus:z-10 focus:border-x-primary-600 focus-visible:z-10 aria-expanded:z-10 aria-expanded:border-x-primary-600;

    > .ComboInput-label,
    > .ComboInput-icon {
      @apply invisible;
    }

    .CIG & {
      @apply w-[calc(100%_-_var(--icon-button-w))];
    }
  }
}

.ImageEditor-groups.is-focus-active {
  .ComboInput {
    @apply pointer-events-auto;

    > .ComboInput-label,
    > .ComboInput-icon {
      @apply visible;
    }
  }

  .ImageEditor-focusToggle {
    @apply btu-button-pressed;
  }
}

.ImageEditor-focus-container {
  @apply cursor-pointer;
}

.ImageEditor-preview-border {
  @apply absolute inset-0 rounded-t-lg border border-black-light opacity-40 mix-blend-hard-light;
}

/* Hide focus controls & helper text when focus toggle is off */
.is-imagePreview:not(:has(.ImageEditor-groups.is-focus-active)) {
  .ImageEditor-focus-container {
    @apply pointer-events-none hidden;
  }
  .ImageEditor-focus-point,
  .ImageEditor-implicitMessage,
  .ImageEditor-focusMessage,
  .ImageEditor-preview-border {
    @apply hidden;
  }
}

/* setting focus point helper text */
.ImageEditor-focusMessage {
  @apply mt-1.5 text-sm text-gray-500 [grid-area:message];
}

/* Focus message styling for reference field */
.CIG-small:has(> .ContentSelector-search ~ .ImageEditor-container)
  .ImageEditor-container
  .ImageEditor-focusMessage {
  @apply mt-0 border-t p-1.5;
}

.ImageEditor-implicitMessage {
  @apply absolute left-1/2 top-2 z-[3] -translate-x-1/2 bg-gray-900 px-3 py-2 text-sm text-white;
}

.ImageEditor-implicitMessage.is-hidden {
  @apply hidden;
}

.ImageEditor-focus-point {
  --focus-point-color: light-dark(
    theme(colors.primary.600),
    theme(colors.primary.200)
  );

  @apply absolute z-[3] size-3.5 rounded-full bg-[radial-gradient(var(--focus-point-color),var(--focus-point-color)_5px,white_5px,white_7px)] [grid-area:preview];

  &.is-implicit {
    --focus-point-color: light-dark(
      theme(colors.gray.700),
      theme(colors.gray.100)
    );
  }

  &.is-hidden:not(.is-implicit) {
    @apply hidden;
  }
}

/* Image Editor popup layout */
.ImageEditor {
  --margin: 68px;
  @apply fixed inset-[--margin] z-[1000] grid origin-bottom scale-y-0 rounded-lg bg-white opacity-0 [grid-template-areas:'title_title''aside_editor''actions_editor'] [grid-template-columns:280px_auto] [grid-template-rows:auto_1fr_auto] [transition:opacity_theme(transitionDuration.500)_theme(transitionTimingFunction.in),transform_theme(transitionDuration.500)_theme(transitionTimingFunction.out)];

  > * {
    @apply z-[1];
  }

  .is-imageEditorOpen & {
    @apply transform-none opacity-100 shadow-lg before:absolute before:-inset-[--margin] before:z-0 before:bg-gray-300/70 before:backdrop-blur;
  }

  .ActionBar {
    @apply gap-2 rounded-es-lg border-e [grid-area:actions];

    .ImageEditor-resetButton {
      @apply btu-button-fill-none !btu-button-error -order-1 me-auto btu-button-container-none before:btu-icon before:btu-icon-rotate-ccw;
    }
  }
}

.ImageEditor-main {
  @apply relative overflow-x-auto rounded-ee-lg [grid-area:editor];

  img {
    @apply blokk max-h-full max-w-full;
  }
}

.ImageEditor-focus-container,
.ImageEditor-hotspot-container,
.ImageEditor-editableArea {
  @apply absolute left-0 top-0 size-full;

  &.is-hidden {
    @apply hidden;
  }
}

.ImageEditor-title {
  @apply btu-heading-5 rounded-t-lg border-b bg-white px-6 py-3.5 text-gray-900 [grid-area:title];
}

.ImageEditor-aside {
  @apply overflow-y-auto border-e bg-white [grid-area:aside];
  .TC-unselected {
    @apply hidden;
  }

  .TabBar {
    @apply my-0 px-4;
    > .TabBar-item {
      @apply __tab-item-xs;
    }
  }
}

/* Image adjustments & filters UI */
.ImageEditor-edit {
  @apply px-4;
  > h2,
  > table {
    @apply hidden;
  }

  > .CIG-row {
    @apply py-4;
  }

  .CIG-label {
    @apply text-sm font-semibold text-gray-700;

    &:has(input[type='range']) {
      @apply w-full justify-between;
    }
  }

  .CIG-small {
    @apply mt-2 text-sm text-gray-700;
  }
}

.ImageEditor-editGroup {
  input[type='checkbox'] {
    @apply rounded-full after:btu-icon checked:after:btu-icon-dot after:btu-icon-xl checked:after:scale-[1];
  }

  input[type='range'] {
    @apply appearance-none [--webkit-appearance:none];

    &::-webkit-slider-container {
      @apply h-2 [background:linear-gradient(to_right,transparent,transparent_50%,theme(colors.gray.300)_50%,theme(colors.gray.300)_calc(50%_+_1px),transparent_calc(50%_+_1px),transparent)];
    }

    &::-webkit-slider-runnable-track {
      @apply h-px w-full cursor-pointer bg-gray-300;
    }
    &::-moz-range-track {
      @apply h-px w-full cursor-pointer bg-gray-300;
    }

    &::-webkit-slider-thumb {
      @apply -mt-[6.5px] size-3.5 rounded-full [-webkit-appearance:none] [background:radial-gradient(theme(colors.white.DEFAULT),theme(colors.white.DEFAULT)_5px,theme(colors.gray.700)_5px,theme(colors.gray.700)_7px)];
    }
    &::-moz-range-thumb {
      @apply -mt-[6.5px] size-3.5 rounded-full [background:radial-gradient(theme(colors.white.DEFAULT),theme(colors.white.DEFAULT)_5px,theme(colors.gray.700)_5px,theme(colors.gray.700)_7px)];
    }
  }
}

/* Image editor crops tab */
.ImageEditor-sizes {
  > table {
    @apply hidden;
  }

  > .Message {
    @apply rounded-none border-e-0 border-t-0;
  }
}

.ImageEditor-sizeSelectors {
  @apply grid gap-2 p-4;
}

.ImageEditor-size {
  @apply relative flex w-full animate-slide-fade-scroll cursor-pointer flex-wrap rounded-lg border border-gray-300 bg-white shadow-sm [animation-range:entry_10%_contain_10dvh] [animation-timeline:--image-size-scroll] [view-timeline-name:--image-size-scroll];

  &.imageEditor-sizeSelected {
    @apply border-primary-500 bg-primary-50;
  }

  &:hover {
    @apply bg-gray-100;
  }

  &.ImageEditor-sizeModified {
    .ImageEditor-sizeDescription .is-inherit {
      @apply hidden;
    }

    .ImageEditor-sizeDescription .is-override {
      @apply blokk;
    }
  }
}

.ImageEditor-sizePreview {
  @apply order-1 flex h-[168px] w-full items-center justify-center overflow-hidden rounded-t-lg bg-gray-50;

  canvas,
  img {
    @apply max-h-full max-w-full;
  }
}

.ImageEditor-sizeContainer {
  @apply order-2 flex w-full gap-2 border-t px-4 py-3;

  &:has(+ .ImageEditor-sizeDescription:not(:empty)) {
    @apply pb-0;
  }
}

.ImageEditor-sizeLabel {
  @apply w-[calc(100%-theme(iconSize.md)-theme(spacing.4))] grow self-center text-sm font-medium capitalize text-gray-900;
  br {
    @apply hidden;
  }

  > *:not(:last-child) {
    @apply after:[--tw-content:',_'];
  }
}

.ImageEditor-sizeDescription {
  @apply order-2 basis-full px-4 pb-4 text-xs capitalize text-gray-500 empty:hidden;
  .is-inherit {
    @apply blokk;
  }

  .is-override {
    @apply hidden;
  }
}

.ImageEditor-renditionResetButton {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs pointer-events-none invisible before:btu-icon before:btu-icon-rotate-ccw touch-device:btu-button-sm;

  &.is-visible {
    @apply pointer-events-auto visible;
  }
}

.ImageEditor-rotate-left,
.ImageEditor-rotate-right,
.ImageEditor-flip-h,
.ImageEditor-flip-v {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon;
}

.ImageEditor-rotate-left {
  @apply before:btu-icon-rotate-ccw;
}

.ImageEditor-rotate-right {
  @apply before:btu-icon-rotate-cw;
}

.ImageEditor-flip-h {
  @apply before:btu-icon-flip-horizontal-2;
}

.ImageEditor-flip-v {
  @apply before:btu-icon-flip-vertical-2;
}

/* Hotspots UI */
.ImageEditor-hotspotableArea {
  @apply relative;
}

.ImageEditor-hotspotableArea.is-dragging
  .ImageEditor-hotspot.is-draggable:not(.is-dragging) {
  @apply opacity-30;
}

.ImageEditor-hotspots {
  @apply p-4;
  /* Hide the Transient hotspot region option since it isn't used. */
  .ComboInput-option[data-value^='Transient'],
  /* Hide the hotspot item's x/y inputs since those values will come from dragging hotspot overlays. */
  .CIG-row[data-name$='/cms.image.x'],
  .CIG-row[data-name$='/cms.image.y'] {
    @apply hidden;
  }
}

.ImageEditor-hotspot {
  --hotspot-bg: theme(colors.white.light);
  --hotspot-border: light-dark(theme(colors.gray.200), theme(colors.gray.600));

  @apply absolute z-[1] flex size-9 items-center justify-center rounded-full border border-[--hotspot-border] bg-[--hotspot-bg] text-sm font-semibold text-black-light opacity-100 shadow-lg [transition:opacity_theme(transitionDuration.500)_ease];
}

.ImageEditor-hotspot.is-hidden {
  @apply opacity-0;
}

.ImageEditor-hotspot.is-hovered {
  --hotspot-bg: light-dark(theme(colors.gray.100), theme(colors.gray.700));
}

.ImageEditor-hotspot.is-removing {
  --hotspot-bg: light-dark(theme(colors.error.25), theme(colors.error.900));
  @apply pointer-events-none text-error-400 line-through;
}

.ImageEditor-hotspot.is-added {
  --bg-from: light-dark(theme(colors.primary.50), theme(colors.primary.800));
  --border-from: light-dark(
    theme(colors.primary.600),
    theme(colors.primary.200)
  );

  --bg-to: theme(colors.white.light);
  --border-to: light-dark(theme(colors.gray.200), theme(colors.gray.600));
  @apply animate-hotspot-added;
}

.ImageEditor-hotspot.is-dragging {
  --hotspot-bg: light-dark(theme(colors.primary.50), theme(colors.primary.800));
  --hotspot-border: light-dark(
    theme(colors.primary.600),
    theme(colors.primary.200)
  );
}

.ImageEditor-hotspot.is-moving {
  --hotspot-bg: light-dark(theme(colors.gray.100), theme(colors.gray.700));
  @apply opacity-75;
}

/* When displayed within a dialog, just use the dialog's backdrop and margin. */
dialog:modal .ImageEditor {
  @apply [--margin:0];
}
