@import '../shared-styles/index';

// Keyframes that apply no styles, but allow us to monitor when an text field becomes autofilled
// by watching for the animation events that are fired when they start. Note: the /*!*/ comment is
// needed to prevent LibSass from stripping the keyframes out.
// Based on: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
@keyframes cdk-text-field-autofill-start {
  /*!*/
}
@keyframes cdk-text-field-autofill-end {
  /*!*/
}

.cdk-text-field-autofill-monitored:-webkit-autofill {
  // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.
  animation: cdk-text-field-autofill-start 0s 1ms;
}

.cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
  // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.
  animation: cdk-text-field-autofill-end 0s 1ms;
}

// Remove the resize handle on autosizing textareas, because whatever height
// the user resized to will be overwritten once they start typing again.
textarea.cdk-textarea-autosize {
  resize: none;
  // This is necessary to avoid the vertical scrollbar that appears with border-box
  box-sizing: content-box;
}

// This class is temporarily applied to the textarea when it is being measured. It is immediately
// removed when measuring is complete. We use `!important` rules here to make sure user-specified
// rules do not interfere with the measurement.
textarea.cdk-textarea-autosize-measuring {
  height: auto !important;
  overflow: hidden !important;
  // Having 2px top and bottom padding seems to fix a bug where Chrome gets an incorrect
  // measurement. We just have to account for it later and subtract it off the final result.
  padding: 2px 0 !important;
  box-sizing: content-box !important;
}

// These styles are being loaded by the formfield component as the directive can't provide styles.
// That's some nasty tight coupling. They are actually tight coupled so it's okay.
.c-input {
  text-align: inherit;
  font-size: inherit;
  font-weight: inherit;
  background: 0 0;
  color: inherit;
  border: none;
  outline: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;

  /* IE10+ Fix to remove the clear button that appears on input */
  &::-ms-clear {
    display: none;
  }

  /* Chrome Fix to remove clear button that appears on input[type=search] */
  &::-webkit-search-decoration,
  &::-webkit-search-cancel-button,
  &::-webkit-search-results-button,
  &::-webkit-search-results-decoration {
    display: none;
    -webkit-appearance: none;
  }

  @include input-placeholder {
    user-select: none;
    @include type-style(formfield-input-native-placeholder);
    color: v(formfield-input-native-placeholder-color);

    &:-ms-input-placeholder {
      -ms-user-select: text;
    }

    // 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 ease-in 100ms 200ms; // Delay the transition until the label has animated
  }

  // to align the placeholder vertically inside the element on firefox the line height
  // needs to equal the element height.
  // this will still be slightly off in cases where the B2C formfield has some bottom
  // padding instead of the input being centered.
  &::-moz-placeholder {
    line-height: calc(#{v(formfield-control-height)} - #{v(formfield-border-width)});
  }
}

textarea.c-input {
  height: auto;
  font-family: inherit;
}

.c-input.is-focused {
  border: none;
  outline: none;
  box-shadow: none;

  @include input-placeholder {
    opacity: 1;
    transition: opacity ease-in 200ms 150ms; // Delay the transition until the label has animated
  }
}

.c-input.is-disabled {
  cursor: not-allowed;
}

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

// hide red box-shadow that is shown on default
.c-input:invalid,
.c-input:required {
  box-shadow: none;
}
