/**
  * REMEMBER: --large modifiers must come last to override --compressed
  */

.euiFilePicker {
  @include euiFormControlSize($includeAlternates: true);
  position: relative;

  &.euiFilePicker--large {
    border-radius: $euiFormControlBorderRadius;
    overflow: hidden;
    height: auto;
  }

  &.euiFilePicker--large.euiFilePicker--compressed {
    border-radius: $euiFormControlCompressedBorderRadius;
  }
}

// The input is an invisible dropzone / button
.euiFilePicker__input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  overflow: hidden;

  &:hover {
    cursor: pointer;
  }

  &:hover:disabled {
    cursor: not-allowed;
  }

  &:disabled ~ .euiFilePicker__prompt {
    color: $euiColorMediumShade;
  }
}

.euiFilePicker__icon {
  position: absolute;
  left: $euiSizeM;
  top: $euiSizeM;
  transition: transform $euiAnimSpeedFast $euiAnimSlightResistance;

  .euiFilePicker--compressed & {
    top: $euiSizeS;
    left: $euiSizeS;
  }

  .euiFilePicker--large & {
    position: static;
    margin-bottom: $euiSize;
  }
}

/**
  * 1. Don't block the user from dropping files onto the filepicker.
  * 2. Ensure space for import icon, loading spinner, and clear button (only if it has files)
  * 3. Delay focus gradient or else it will only partially transition while file chooser opens
  * 4. Static height so that it doesn't shift its surrounding contents around
  */
.euiFilePicker__prompt {
  @include euiFormControlDefaultShadow;
  @include euiFormControlWithIcon; /* 2 */
  height: $euiFormControlHeight;
  padding-top: $euiFormControlPadding;
  padding-right: $euiFormControlPadding;
  padding-bottom: $euiFormControlPadding;
  pointer-events: none; /* 1 */
  border-radius: $euiFormControlBorderRadius;

  // sass-lint:disable-block indentation
  transition:
    box-shadow $euiAnimSpeedFast ease-in,
    background-color $euiAnimSpeedFast ease-in,
    background-image $euiAnimSpeedFast ease-in,
    background-size $euiAnimSpeedFast ease-in $euiAnimSpeedFast; /* 3 */

  .euiFilePicker--compressed & {
    @include euiFormControlStyleCompressed($includeStates: false);
    @include euiFormControlWithIcon($compressed: true); /* 2 */
    height: $euiFormControlCompressedHeight;
    border-radius: $euiFormControlCompressedBorderRadius;
  }

  .euiFilePicker--large & {
    height: $euiFilePickerTallHeight; /* 4 */
    padding: 0 $euiSizeL;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .euiFilePicker--large.euiFilePicker--compressed & {
    height: $euiFilePickerTallHeight - $euiSizeL; /* 4 */
  }

  .euiFilePicker-isInvalid & {
    @include euiFormControlInvalidStyle;
  }
}

.euiFilePicker__promptText {
  @include euiFontSizeS;
  @include euiTextTruncate;
  line-height: $euiSize;

  // make normal sized prompt look like placeholder
  .euiFilePicker:not(.euiFilePicker--large):not(.euiFilePicker-hasFiles) & {
    color: $euiColorMediumShade;
  }
}

.euiFilePicker__clearButton,
.euiFilePicker__loadingSpinner {
  position: absolute;
  right: $euiSizeM;
  top: $euiSizeM;

  .euiFilePicker--compressed & {
    top: $euiSizeS;
  }
}

/**
  * 1. Undo the pointer-events: none applied to the enclosing prompt.
  */
.euiFilePicker__clearButton {
  pointer-events: auto; /* 1 */

  .euiFilePicker:not(.euiFilePicker--large) & {
    @include euiFormControlLayoutClearIcon('.euiFilePicker__clearIcon');
  }

  .euiFilePicker--large & {
    position: relative;
    top: 0;
    right: 0;
  }
}

// Focus
.euiFilePicker__showDrop .euiFilePicker__prompt,
.euiFilePicker__input:focus + .euiFilePicker__prompt {
  @include euiFormControlFocusStyle;

  .euiFilePicker--compressed & {
    @include euiFormControlFocusStyle($borderOnly: true);
  }
}

// Disabled
.euiFilePicker__input:disabled + .euiFilePicker__prompt {
  @include euiFormControlDisabledStyle;
}

// Make space for the icons on the right
.euiFilePicker:not(.euiFilePicker--large) {
  &.euiFilePicker-isLoading .euiFilePicker__prompt,
  &.euiFilePicker-hasFiles .euiFilePicker__prompt {
    @include euiFormControlWithIcon(false, 'right'); /* 2 */
  }
}

// When the filepicker has files in it
.euiFilePicker-hasFiles .euiFilePicker__promptText {
  color: $euiTextColor;
}

// Large styles only
.euiFilePicker--large {
  // sass-lint:disable-block nesting-depth
  // Hover and focus
  .euiFilePicker__input:hover:not(:disabled),
  .euiFilePicker__input:focus {
    + .euiFilePicker__prompt {
      .euiFilePicker__promptText {
        // Adding the underline to the prompt text ensures the underline
        // color is the same as the current text color
        text-decoration: underline;
      }

      .euiFilePicker__icon {
        transform: scale(1.1);
      }
    }
  }

  // While dragging files over the dropzone
  &.euiFilePicker__showDrop .euiFilePicker__prompt {
    .euiFilePicker__promptText {
      text-decoration: underline;
    }

    .euiFilePicker__icon {
      transform: scale(1.1);
    }
  }

  &.euiFilePicker-hasFiles .euiFilePicker__promptText {
    font-weight: $euiFontWeightBold;
  }
}