@reference 'tailwindcss';

:host {
  --emr-upload-area-bg: transparent;
  --emr-upload-area-padding: --spacing(10);
  --emr-upload-area-border: 1px solid var(--color-border);
  --emr-upload-area-border-radius: theme(--radius-2xl);
  --emr-upload-area-font-size: theme(--text-sm);
  --emr-upload-area-color: var(--color-neutral-600);
  --emr-upload-area-drop-active-border: 1px dashed var(--color-primary);
  --emr-upload-area-drop-active-color: var(--color-primary);
  --emr-upload-area-drop-active-bg: var(--color-primary-200);
  --emr-upload-area-drop-invalid-border: 1px dashed var(--color-red-500);
  --emr-upload-area-drop-invalid-color: var(--color-red-500);
  --emr-upload-area-drop-invalid-bg: var(--color-red-100);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: var(--emr-upload-area-color);
  border-radius: var(--emr-upload-area-border-radius);
  border: var(--emr-upload-area-border);
  font-size: var(--emr-upload-area-font-size);
  background-color: var(--emr-upload-area-bg);
  padding: var(--emr-upload-area-padding);

  &.is-allow-hover:hover {
    cursor: pointer;
    border: var(--emr-upload-area-drop-active-border);
    color: var(--emr-upload-area-drop-active-color);
    background: var(--emr-upload-area-drop-active-bg);
  }

  &.is-drop-active {
    border: var(--emr-upload-area-drop-active-border);
    color: var(--emr-upload-area-drop-active-color);
    background: var(--emr-upload-area-drop-active-bg);
  }

  &.is-drop-invalid {
    border: var(--emr-upload-area-drop-invalid-border);
    color: var(--emr-upload-area-drop-invalid-color);
    background: var(--emr-upload-area-drop-invalid-bg);
  }

  .state {
    display: none;

    &.is-active {
      display: block;
    }
  }

  .icon {
    margin-bottom: --spacing(2);

    &:empty {
      display: none;
    }
  }
}

:host-context(html.dark) {

}
