@import '../../../../../scss/styles.scss';

.file-field {
  position: relative;
  margin: base(1.5) 0 base(2);
  background: var(--theme-elevation-50);

  .tooltip.error-message {
    z-index: 3;
    bottom: calc(100% - #{base(.5)});
  }

  &__drag-label {
    margin: 0;
    text-transform: lowercase;
  }

  &__upload {
    position: relative;

    input[type=file] {
      position: absolute;
      top: 0;
      z-index: -1;
    }
  }

  &__file-selected,
  &__drop-zone {
    background: var(--theme-elevation-100);
    position: relative;
    z-index: 2;
    padding: base(2);
    display: flex;
  }

  &__drop-zone {
    align-items: center;
    border: 1px dotted var(--theme-elevation-400);

    .btn {
      margin: 0 $baseline 0 0;
    }
  }

  &__file-selected {
    flex-direction: column;
    .btn {
      @include formInput;
      position: relative;
      margin-top: 0;
      margin-bottom: 0;
      margin-left: -1px;
      display: flex;
      padding: 0 base(0.5);
      align-items: center;
      display: flex;
      cursor: pointer;
      width: fit-content;

      &:hover {
        .btn__icon {
          background: none;

          .stroke {
            stroke: currentColor;
          }
        }
      }
    }
  }

  &__file-upload {
    display: flex;
    width: 100%;
  }

  &__filename {
    @include formInput;
    padding-top: base(.25);
    padding-bottom: base(.25);
    flex-wrap: nowrap;
  }

  &--dragging {
    .file-field__drop-zone {
      border-color: var(--theme-success-500);
      background: var(--theme-success-150);

      * {
        pointer-events: none;
      }
    }
  }

  @include mid-break {
    &__drop-zone {
      display: block;
      text-align: center;

      .btn {
        margin: 0 auto;
        width: 100%;
        max-width: 200px;
      }

      .file-field__drag-label {
        display: none;
      }
    }
  }
}
