.cobalt-photo-dropzone {
  @apply c-bg-surfaceContainerVariant c-border c-border-onPrimaryContainer c-rounded-xl;
  position: relative;

  border-style: dashed;

  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  min-height: 6rem;

  text-align: center;

  cursor: pointer;

  transition: background-color 0.25s;
}

.cobalt-photo-dropzone--filled,
.cobalt-photo-dropzone--loading {
  border-color: transparent;
}

.cobalt-photo-dropzone--filled:not(.cobalt-photo-dropzone--loading):not(
    .cobalt-photo-dropzone--imageVisible
  ) {
  background: linear-gradient(
    90deg,
    theme("colors.surfaceContainerVariant") 20px,
    theme("colors.disabled") 80px,
    theme("colors.surfaceContainerVariant") 110px
  );
  background-size: 200%;

  animation: leftToRight 2s infinite reverse;
}

.cobalt-photo-dropzone:hover,
.cobalt-photo-dropzone:focus {
  .cobalt-photo-dropzone__description {
    transform: scale(1.05);
    transition: transform 0.25s;
  }
}

.cobalt-photo-dropzone--dragging {
  @apply c-bg-primaryContainer;

  transition: background-color 0.25s;

  .cobalt-photo-dropzone__description {
    transform: scale(1.05);
    transition: transform 0.25s;
  }
}

.cobalt-photo-dropzone--loading {
  @apply c-bg-surfaceContainerVariant c-text-primary;
  border-style: solid;

  cursor: default;
}

.cobalt-photo-dropzone--errored {
  @apply c-bg-surfaceContainerVariant c-border c-border-error;
  border-style: solid;
}

.cobalt-photo-dropzone__description {
  max-width: 80%;

  transform: scale(1);
  transition: transform 0.25s;
}

.cobalt-photo-dropzone__description--strong {
  @apply c-text-primary;
  font-weight: 700;
}

.cobalt-photo-dropzone__preview {
  width: 100%;
  height: 100%;

  @apply c-rounded-lg;
  object-fit: cover;

  overflow-clip-margin: unset; // To avoid pixalated image when used as cover (chrome)
}

.cobalt-photo-dropzone__delete-button {
  @apply c-bg-surfaceContainerVariant c-rounded-full;
  position: absolute;
  bottom: 1rem;
  right: 1rem;

  width: 3rem;
  height: 3rem;

  border: 0;

  cursor: pointer;
  opacity: 0;

  transition: opacity 0.5s ease;
  pointer-events: none;
}

.cobalt-photo-dropzone__delete-button--triggered {
  opacity: 1;

  animation: pop 0.3s ease 1;
  transition: opacity 0.5s ease;
  pointer-events: initial;
}

.cobalt-photo-dropzone__hidden-input {
  @apply c-sr-only;
}

@keyframes pop {
  50% {
    transform: scale(1.1);
  }
}

@keyframes leftToRight {
  0% {
    background-position: -100% 0;
  }

  100% {
    background-position: 100% 0;
  }
}