@import 'themes/default';
@import 'themes/bandit';

.Drag-and-Drop {
  --focus--offset: var(--focus--width);

  align-items: center;
  background-color: var(--Drag-and-Drop____background-color);
  border: var(--Drag-and-Drop____border);
  border-radius: var(--Drag-and-Drop____radius);
  color: var(--Drag-and-Drop____color);
  position: relative;
  transition: color, background-color, border;
  transition-duration: var(--timing--hover);

  &:focus-within:has(:focus-visible) {
    outline: var(--focus--color) var(--focus--style) var(--focus--width);
    outline-offset: var(--focus--offset);
  }

  &--dragged-over {
    background-color: var(--Drag-and-Drop--dragged-over____background-color);
    border: var(--Drag-and-Drop--dragged-over____border);
    color: var(--Drag-and-Drop--dragged-over____color);
  }

  &--success {
    background-color: var(--Drag-and-Drop--success____background-color);
    border: var(--Drag-and-Drop--success____border);
    color: var(--Drag-and-Drop--success____color);
  }

  &--error {
    background-color: var(--Drag-and-Drop--error____background-color);
    border: var(--Drag-and-Drop--error____border);
    color: var(--Drag-and-Drop--error____color);
  }

  &--disabled {
    background-color: var(--Drag-and-Drop--disabled____background-color);
    border: var(--Drag-and-Drop--disabled____border);
    color: var(--Drag-and-Drop--disabled____color);
    opacity: 1;
  }
}

.Drag-and-Drop__File-Input {
  cursor: pointer;
  height: 100%;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  width: 100%;

  &--disabled {
    cursor: unset;
  }
}