@use "../../../1-settings/class-vars";
@use "../../../1-settings/color-swatches";
@use "../../../2-tools/tools-index";

#{class-vars.$base-class} {
  .file-input {
    &__box {
      border: 1px dashed var(--gray-color);
      position: relative;
      background: white;
      text-align: center;

      &--dragged, &--dragged > div {
        background: var(--form-ele-color-light);
      }

      &--disabled > div {
        background: var(--disabled-gray);
      }

      input[type="file"] {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        text-indent: -9999px;
        cursor: pointer;
        transition: box-shadow var(--timing-xquick) ease-in-out;
        z-index: 1;

        @include tools-index.form-ele-hover-medium;
        @include tools-index.form-ele-focus;

        &:disabled {
          cursor: not-allowed;
        }
      }
    }
    &__instructions {
      padding: var(--spacing-l) var(--spacing);
      pointer-events: none;
      position: relative;
      z-index: 3;
    }

    &__file-selected {
      background-color: #{color-swatches.$azul-16};
      pointer-events: none;
      position: relative;
      text-align: left;
      z-index: 3;

      > div {
        padding: var(--spacing-s) var(--spacing);
      }

      hr {
        margin: 0;
        border-color: white;
      }
    }

    &__file-list {
      display: flex;

      .tag__wrapper {
        background: white;
        pointer-events: all;

        &:not(:last-child) {
          margin: 0 var(--spacing) var(--spacing) 0;
        }
      }
    }

    &__safari {
      background: white;
      height: 100%;
      pointer-events: none;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 2;
    }
  }
}