.root {
  position: relative;
  opacity: var(--faded-opacity, 1); /* Use a CSS variable for dynamic faded state */
  transform-origin: 0 0;
  height: var(--is-primary-height, 200px); /* Use a CSS variable for dynamic height */
  grid-row-start: var(--is-primary-grid-row, auto); /* Use a CSS variable for dynamic grid row */
  grid-column-start: var(--is-primary-grid-column, auto); /* Use a CSS variable for dynamic grid column */
  background-size: cover;
  background-position: center;
  background-color: grey;
  overflow: hidden;
}

.error {
  border: 1px solid var(--mantine-color-red-filled); /* Replace with Mantine's red variant color */
}

.draggableIcon {
  background: alpha(var(--mantine-color-dark-8), 0.5); /* Replace with Mantine's dark color in RGBA */
  height: 120px;
  width: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.draggable {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;

  /* Uncomment if needed */
  /* transition: 0.3s ease-in-out opacity; */

  &:hover {
    opacity: 1;
  }
}
