@layer components {
  .rs-file-upload {
    --rs-file-upload-radius: var(--rs-radius-medium);
    --rs-file-upload-border: var(--rs-color-border-neutral);
    position: relative;
    display: block;
    border: 1px dashed var(--rs-file-upload-border);
    border-radius: var(--rs-file-upload-radius);
    padding: var(--rs-unit-x6);
    background: var(--rs-color-background-elevation-base);
    text-align: center;
    transition:
      background-color var(--rs-duration-fast) var(--rs-easing-standard),
      border-color var(--rs-duration-fast) var(--rs-easing-standard),
      box-shadow var(--rs-duration-fast) var(--rs-easing-standard);
  }

  .rs-file-upload > input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
  }

  .rs-file-upload:focus-within {
    box-shadow: var(--rs-shadow-focus);
  }

  @media (hover: hover) and (pointer: fine) {
    .rs-file-upload:hover:not(:has(input:disabled)) {
      background: color-mix(
        in oklch,
        var(--rs-color-background-neutral),
        transparent 86%
      );
    }
  }

  .rs-file-upload[data-highlighted] {
    --rs-file-upload-border: var(--rs-color-border-primary);
    background: color-mix(
      in oklch,
      var(--rs-color-background-primary),
      transparent 90%
    );
  }

  .rs-file-upload:has(input:disabled) {
    --rs-file-upload-border: var(--rs-color-border-disabled);
    opacity: 0.5;
    cursor: not-allowed;
  }
}