@use "../../variables/forms" as formsVars;
@use "../../tools/a11y";
@use "../../tools/borders";
@use "../../tools/colour";
@use "../../tools/media";
@use "../../tools/spacing";
@use "../../tools/typography";

.tna-file-input {
  width: 100%;

  display: block;

  box-sizing: border-box;

  border-radius: 0.1px;

  cursor: pointer;

  &::file-selector-button {
    margin-right: spacing.space(0.5);

    cursor: inherit;
  }

  &__droppable {
    width: 100%;
    padding: spacing.space(0.5) spacing.space(1) spacing.space(1);

    box-sizing: border-box;

    position: relative;

    @include colour.colour-border(
      "keyline",
      formsVars.$form-field-border-width
    );
    @include borders.rounded-border;

    &--empty {
      border-style: dashed;
    }
  }

  &__droppable:has(:is(&:hover, &:active)) {
    @include colour.colour-border("keyline-dark");
  }

  &__droppable:has(&:focus) {
    @include a11y.focus-outline;
  }

  &__droppable & {
    padding: spacing.space(1);

    position: absolute;
    inset: 0;
    z-index: 1;

    opacity: 0;
  }

  &__droppable-buttons {
    @include typography.font-size(14);
    line-height: 1.5rem;

    @include media.on-tiny {
      flex-direction: row;
      align-items: center;
    }
  }

  &__droppable-status {
    margin-top: spacing.space(0.5);
    padding: spacing.space(0.5);

    display: block;
    overflow: hidden;

    line-height: 1.25;
    text-overflow: ellipsis;

    white-space: nowrap;

    @include borders.rounded-border;

    @include colour.tint;
  }

  &__droppable:not(&__droppable--empty) &__droppable-status {
    @include colour.blue-accent;
    @include colour.accent-light;
    @include typography.main-font-weight-medium;
  }

  &__droppable &:hover ~ &__droppable-buttons {
    .tna-button {
      &:not(.tna-button--plain) {
        @include colour.colour-font("button-hover-text");
        text-decoration: none;

        background: transparent;
      }
    }
  }

  &__droppable--over,
  &__droppable--over-multiple {
    @include colour.colour-border("keyline-dark");

    &::before {
      display: flex;
      align-items: center;
      justify-content: center;

      position: absolute;
      inset: spacing.space(0.5);
      z-index: 2;

      pointer-events: none;

      @include colour.green-accent;

      @include colour.colour-font("accent-font-base");
      @include typography.main-font-weight-bold;

      @include colour.colour-background("accent-background");
    }
  }

  &__droppable--over {
    &::before {
      content: "Drop file here";
    }
  }

  &__droppable--over-multiple {
    &::before {
      content: "Drop files here";
    }
  }
}