@use './variables' as *
@use '../../styles/settings'
@use '../../styles/tools'
@use 'sass:math'
@use 'sass:selector'

@include tools.layer('components')
  .v-file-input
    &--hide.v-input
      .v-field,
      .v-input__control,
      .v-input__details
        display: none

      .v-input__prepend
        grid-area: control
        margin: 0 auto

    &--chips.v-input--density-compact
      .v-field--variant-solo,
      .v-field--variant-solo-inverted,
      .v-field--variant-filled,
      .v-field--variant-solo-filled
        .v-label.v-field-label
          &--floating
            top: 0px

    .v-field__input
      word-break: break-word

    input[type="file"]
      height: 100%
      left: 0
      opacity: 0
      position: absolute
      top: 0
      width: 100%
      z-index: 0

    .v-field
      outline: 2px dashed transparent
      outline-offset: 2px
      transition: outline-color 250ms settings.$standard-easing

    &--dragging
      .v-field
        outline-color: rgba(var(--v-theme-on-surface), $file-input-drag-outline-opacity)

      input[type="file"]
        z-index: 1

    input[inert]
      pointer-events: none // for Chromium < 102 / Firefox < 112 -- drop in v5