@import '../core/style/variables';
@import '../core/style/vendor-prefixes';


// The Input element proper.
.mat-input-element {
  // Font needs to be inherited, because by default <input> has a system font.
  font: inherit;

  // The Material input should match whatever background it is above.
  background: transparent;

  // If background matches current background then so should the color for proper contrast
  color: currentColor;

  // By default, <input> has a padding, border, outline and a default width.
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  width: 100%;

  // Prevent textareas from being resized outside the form field.
  max-width: 100%;

  // Needed to make last line of the textarea line up with the baseline.
  vertical-align: bottom;

  // Undo the red box-shadow glow added by Firefox on invalid inputs.
  // See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid
  &:-moz-ui-invalid {
    box-shadow: none;
  }

  // Remove IE's default clear and reveal icons.
  &::-ms-clear, &::-ms-reveal {
    display: none;
  }

  // Fixes an issue on iOS where the following input types will collapse to 1px,
  // if they're empty, because we've overridden their background color.
  // See: https://stackoverflow.com/questions/18381594/input-type-date-appearance-in-safari-on-ios
  &[type='date'],
  &[type='datetime'],
  &[type='datetime-local'],
  &[type='month'],
  &[type='week'],
  &[type='time'] {
    &::after {
      content: ' ';
      white-space: pre;
      width: 1px;
    }
  }

  @include input-placeholder {
    // Delay the transition until the label has animated about a third of the way through, in
    // order to prevent the placeholder from overlapping for a split second.
    transition: color $swift-ease-out-duration $swift-ease-out-duration / 3
      $swift-ease-out-timing-function;
  }

  .mat-form-field-hide-placeholder & {
    // Note that we can't use something like visibility: hidden or
    // display: none, because IE ends up preventing the user from
    // focusing the input altogether.
    @include input-placeholder {
      // Needs to be !important, because the placeholder will end up inheriting the
      // input color in IE, if the consumer overrides it with a higher specificity.
      color: transparent !important;

      // Remove the transition to prevent the placeholder
      // from overlapping when the label comes back down.
      transition: none;
    }
  }
}

// Prevents IE from always adding a scrollbar by default.
textarea.mat-input-element {
  // Only allow resizing along the Y axis.
  resize: vertical;
  overflow: auto;
}