// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "../../common/variables";
@import "../button/common";
@import "../../common/mixins";

$file-input-button-width: $pt-spacing * 17.5 !default;
$file-input-button-width-large: $pt-spacing * 21.25 !default;
$file-input-button-width-small: $pt-spacing * 13.75 !default;
$file-input-button-padding: ($pt-input-height - $pt-button-height-small) * 0.5 !default;
$file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) * 0.5 !default;
$file-input-button-padding-small: ($pt-input-height-small - $pt-button-height-smaller) * 0.5 !default;

.#{$ns}-file-input {
  cursor: pointer;
  display: inline-block;
  height: $pt-input-height;
  position: relative;

  input {
    margin: 0;
    min-width: $pt-spacing * 50;
    opacity: 0;

    // unlike other form controls that directly style native elements,
    // pt-file-input wraps and hides the native element for better control over
    // visual styles. to disable, we need to disable the hidden child input, not
    // the surrounding wrapper. @see https://github.com/palantir/blueprint/issues/689
    // for gory details.
    &:disabled + .#{$ns}-file-upload-input,
    &.#{$ns}-disabled + .#{$ns}-file-upload-input {
      @include pt-input-disabled;

      &::after {
        @include pt-button-disabled;
      }

      .#{$ns}-dark & {
        @include pt-dark-input-disabled;

        &::after {
          @include pt-dark-button-disabled;
        }
      }
    }

    // borrows focus styles from pt-input and pt-dark-input mixins (see _common.scss)
    &:focus + .#{$ns}-file-upload-input {
      box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;

      .#{$ns}-dark & {
        box-shadow:
          dark-input-transition-shadow($dark-input-shadow-color-focus, true),
          $pt-dark-input-box-shadow;
      }
    }
  }

  &.#{$ns}-file-input-has-selection {
    .#{$ns}-file-upload-input {
      color: $pt-text-color;
    }

    .#{$ns}-dark & .#{$ns}-file-upload-input {
      color: $pt-dark-text-color;
    }
  }

  &.#{$ns}-fill {
    width: 100%;
  }

  &.#{$ns}-large,
  .#{$ns}-large & {
    height: $pt-input-height-large;
  }

  &.#{$ns}-small,
  .#{$ns}-small & {
    height: $pt-input-height-small;
  }

  .#{$ns}-file-upload-input-custom-text::after {
    content: attr(#{$ns}-button-text);
  }
}

.#{$ns}-file-upload-input {
  @include pt-input;
  @include overflow-ellipsis;
  color: $pt-text-color-disabled;
  left: 0;
  padding-right: $file-input-button-width + $input-padding-horizontal;
  position: absolute;
  right: 0;
  top: 0;
  user-select: none;

  &::after {
    @include pt-button-default-colors;
    @include pt-button-height($pt-button-height-small);
    @include overflow-ellipsis;
    border-radius: $pt-border-radius;
    content: "Browse";
    line-height: $pt-button-height-small;
    margin: $file-input-button-padding;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: $file-input-button-width;
  }

  &:hover::after {
    @include pt-button-hover;
  }

  &:active::after {
    @include pt-button-active;
  }

  // N.B. disabled state is handled above, inside .#{$ns}-file-input block

  .#{$ns}-large & {
    @include pt-input-large;
    padding-right: $file-input-button-width-large + $input-padding-horizontal;

    &::after {
      @include pt-button-height($pt-button-height);
      line-height: $pt-button-height;
      margin: $file-input-button-padding-large;
      width: $file-input-button-width-large;
    }
  }

  .#{$ns}-small & {
    @include pt-input-small;
    padding-right: $file-input-button-width-small + $input-padding-horizontal;

    &::after {
      @include pt-button-height($pt-button-height-smaller);
      line-height: $pt-button-height-smaller;
      margin: $file-input-button-padding-small;
      width: $file-input-button-width-small;
    }
  }

  .#{$ns}-dark & {
    @include pt-dark-input;
    color: $pt-dark-text-color-disabled;

    &::after {
      @include pt-dark-button-default-colors;
    }

    &:hover::after {
      @include pt-dark-button-hover;
    }

    &:active::after {
      @include pt-dark-button-active;
    }
  }
}

// hack to force the button shadow to display since
// it doesn't render correct via the `pt-button` mixin
/* stylelint-disable-next-line no-duplicate-selectors */
.#{$ns}-file-upload-input::after {
  box-shadow: $button-box-shadow;
}