@use "./config";
@use "./mixins";
@use "../../../../styles/tokens/base";
@use "../../../../styles/tools/generate";

@layer components {
  .file-input {
    $this: &;

    font-size: base.$font-size;

    &.is-dragdrop {
      @include mixins.drag-drop-highlight;
    }

    @include mixins.wrapper;

    &__control {
      @include mixins.control;

      @each $size, $values in config.$sizes {
        #{$this}#{generate.variant-name($size)} & {
          @include mixins.control-size($size);
        }
      }
    }

    &__button {
      @include mixins.button;

      @each $size, $values in config.$sizes {
        #{$this}#{generate.variant-name($size)} & {
          @include mixins.control-size($size);
        }
      }
    }

    &__control:focus-visible + &__button {
      @include mixins.control-focused;
    }

    &__control[disabled] + &__button {
      @include mixins.button-disabled;
    }

    &__files {
      @include mixins.files;
    }

    &__delete {
      @include mixins.delete;
    }
  }
}