@use '../../variables' as *;

.root {
  input {
    height: 0;
    width: 0;
    position: absolute;
    opacity: 0;
  }

  &.over .drop,
  input:focus + .drop,
  input:hover + .drop {
    background-color: var(--color-surface-3);
    cursor: pointer;
    transition: 200ms background-color;
  }

  &.invalid .drop {
    border-color: var(--color-error-30);
    color: var(--color-error-30);
    cursor: not-allowed;
  }
}

.drop {
  color: var(--color-accent-50);
  text-align: center;
  border-radius: var(--border-radius-small);
}

.icon {
  color: var(--color-neutral-100);
  font-size: 24px;
}

.item {
  background-color: rgba(var(--color-accent-30-rgb), 0.32);
  padding: $space-xxs $space-xxs $space-xxs $space-m;
  border-radius: var(--border-radius-small);

  &.error {
    background-color: var(--color-error-20);
    border-radius: var(--border-radius-small);
  }

  .loader {
    pointer-events: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: var(--border-radius-small);
    overflow: hidden;
  }

  &.complete {
    background-color: var(--color-success-10);
  }
}