/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

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

.ouiFilePicker {
  @include ouiFormControlSize($includeAlternates: true);
  position: relative;

  &.ouiFilePicker--large {
    border-radius: $ouiFormControlBorderRadius;
    overflow: hidden;
    height: auto;
  }

  &.ouiFilePicker--large.ouiFilePicker--compressed {
    border-radius: $ouiFormControlCompressedBorderRadius;
  }
}

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

  &:hover {
    cursor: pointer;
  }

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

  &:disabled {
    opacity: 0;
  }

  &:disabled ~ .ouiFilePicker__prompt {
    color: $ouiColorMediumShade;
  }
}

.ouiFilePicker__icon {
  position: absolute;
  left: $ouiSizeM;
  top: $ouiSizeM;
  transition: transform $ouiAnimSpeedFast $ouiAnimSlightResistance;

  .ouiFilePicker--compressed & {
    top: $ouiSizeS;
    left: $ouiSizeS;
  }

  .ouiFilePicker--large & {
    position: static;
    margin-bottom: $ouiSize;
  }
}

/**
  * 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
  */
.ouiFilePicker__prompt {
  @include ouiFormControlDefaultShadow;
  @include ouiFormControlWithIcon; /* 2 */
  height: $ouiFormControlHeight;
  padding-top: $ouiFormControlPadding;
  padding-right: $ouiFormControlPadding;
  padding-bottom: $ouiFormControlPadding;
  pointer-events: none; /* 1 */
  border-radius: $ouiFormControlBorderRadius;

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

  .ouiFilePicker--compressed & {
    @include ouiFormControlStyleCompressed($includeStates: false);
    @include ouiFormControlWithIcon($compressed: true); /* 2 */
    height: $ouiFormControlCompressedHeight;
    border-radius: $ouiFormControlCompressedBorderRadius;
  }

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

  .ouiFilePicker--large.ouiFilePicker--compressed & {
    height: $ouiFilePickerTallHeight - $ouiSizeL; /* 4 */
  }

  .ouiFilePicker-isInvalid & {
    @include ouiFormControlInvalidStyle;
  }
}

.ouiFilePicker__promptText {
  @include ouiFontSizeS;
  @include ouiTextTruncate;
  line-height: $ouiSize;

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

.ouiFilePicker__clearButton,
.ouiFilePicker__loadingSpinner {
  position: absolute;
  right: $ouiSizeM;
  top: $ouiSizeM;

  .ouiFilePicker--compressed & {
    top: $ouiSizeS;
  }
}

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

  .ouiFilePicker:not(.ouiFilePicker--large) & {
    @include ouiFormControlLayoutClearIcon('.ouiFilePicker__clearIcon');
  }

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

// Focus
.ouiFilePicker__showDrop .ouiFilePicker__prompt,
.ouiFilePicker__input:focus + .ouiFilePicker__prompt {
  @include ouiFormControlFocusStyle;

  .ouiFilePicker--compressed & {
    @include ouiFormControlFocusStyle($borderOnly: true);
  }
}

// Disabled
.ouiFilePicker__input:disabled + .ouiFilePicker__prompt {
  @include ouiFormControlDisabledStyle;
}

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

// When the filepicker has files in it
.ouiFilePicker-hasFiles .ouiFilePicker__promptText {
  color: $ouiTextColor;
}

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

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

  // While dragging files over the dropzone
  &.ouiFilePicker__showDrop .ouiFilePicker__prompt {
    .ouiFilePicker__promptText {
      text-decoration: underline;
    }

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

  &.ouiFilePicker-hasFiles .ouiFilePicker__promptText {
    font-weight: $ouiFontWeightBold;
  }
}