// vf-form__input

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

.vf-form__input:not([type='file']) {
  @include set-type(text-body--2, $custom-margin-bottom: 0);

  /* stylelint-disable */
  -webkit-appearance: none;
  appearance: none;
  /* stylelint-enable */
  border: 2px solid color(grey);
  border-radius: 0;
  box-sizing: border-box;
  color: ui-color(black);
  display: block;
  padding: map-get($vf-spacing-map, vf-spacing--200);
  position: relative;
  width: 100%;

  &:focus,
  &:hover {
    border-color: color(grey--dark);
    box-shadow: 0 0 0 .0625rem color(grey--dark);
    color: ui-color(black);
    outline: 0;
  }
}

.vf-form__wrap .vf-form__label {
  border-top-left-radius: 3px;
  display: block;
  line-height: 1;
  opacity: 0;
  position: absolute;
  top: -16px;
  transition: all .2s ease-in-out;
  visibility: hidden;
  z-index: set-layer(vf-z-index--form-label);
}

.vf-form__input .vf-form__wrap {
  -webkit-font-smoothing: antialiased;
  position: relative;
  text-rendering: optimizeLegibility;
}

// Avoids an issue with FireFox applying an opacity value on placeholders
// https://github.com/visual-framework/vf-core/issues/519#issuecomment-552398465
.vf-form__input::placeholder {
  opacity: 1;
}

.vf-form__input::placeholder,
.vf-form__select::placeholder,
.vf-form__textarea::placeholder {
  color: color(grey--light);
}

.vf-form__input::-moz-placeholder,
.vf-form__select::-moz-placeholder,
.vf-form__textarea::-moz-placeholder {
  color: color(grey--light);
}

.vf-form__input:-ms-input-placeholder,
.vf-form__select:-ms-input-placeholder,
.vf-form__textarea:-ms-input-placeholder {
  color: color(grey--light);
}

.vf-form__input::-webkit-input-placeholder,
.vf-form__select::-webkit-input-placeholder,
.vf-form__textarea::-webkit-input-placeholder {
  color: color(grey--light);
}

.vf-form__input .vf-form__select {
  /* stylelint-disable */
  ---webkit-appearance: none;
  appearance: none;
  /* stylelint-enable */
  color: color(grey--light);
  cursor: pointer;
  position: relative;
}

.vf-form__input .vf-form__select::-ms-expand {
  display: none;
}

.vf-form__input .vf-form__is-active .vf-form__input,
.vf-form__input .vf-form__is-active .vf-form__select,
.vf-form__input .vf-form__is-active .vf-form__textarea {
  background-color: ui-color(white);
  border-color: ui-color(grey);
  color: color(grey--dark);
}

.vf-form__input .vf-form__has-focus .vf-form__input,
.vf-form__input .vf-form__has-focus .vf-form__select,
.vf-form__input .vf-form__has-focus .vf-form__textarea {
  background-color: ui-color(white);
  border-color: ui-color(black);
}

.vf-form__wrap .vf-form__input .vf-form__label {
  border-radius-top-left: 3px;
  color: color(grey--dark);
  display: block;
  left: 24px;
  opacity: 0;
  position: absolute;
  top: -24px;
  transition: all .2s ease-in-out;
  visibility: hidden;
  z-index: set-layer(vf-z-index--form-label);
}

.vf-form__input .vf-form__is-active .vf-form__label {
  opacity: 1;
  visibility: visible;
}

.vf-form__input .vf-form__has-focus .vf-form__label {
  color: ui-color(black);
}

.vf-form__input .vf-form__is-required::before {
  color: color(red);
  content: '*';
  display: block;
  font-size: 16px;
  line-height: 1.75;
  opacity: 1;
  padding: 6px 0 0;
  position: absolute;
  right: 16px;
  top: 4px;
  transition: all .2s ease-in-out;
  z-index: set-layer(vf-z-index--form-input);
}

.vf-form__input .vf-form__is-required.vf-form__is-active::before {
  opacity: 0;
}


.vf-form__input:disabled {
  background-color: color(grey--lightest);
  border-color: color(grey);
  cursor: not-allowed;


  &::placeholder,
  &::-moz-placeholder,
  &::-ms-input-placeholder,
  &::-webkit-input-placeholder {
    color: color(green);
  }
}

.vf-form__input--invalid:not([type='file']) {
  border-color: ui-color(red);
}

/* stylelint-disable */
// needed because Safari needs the pseudo element to be scoped to the search input type.
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  /* stylelint-enable */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cpath d='M89.796 74.956a7 7 0 010-9.912L136.92 17.92a10.5 10.5 0 00-14.84-14.84L74.956 50.204a7 7 0 01-9.912 0L17.92 3.08A10.5 10.5 0 003.08 17.92l47.124 47.124a7 7 0 010 9.912L3.08 122.08a10.5 10.5 0 1014.84 14.84l47.124-47.124a7 7 0 019.912 0l47.124 47.124a10.5 10.5 0 0014.84-14.84z' fill='%2354585a'/%3E%3C/svg%3E");
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 1em;
  content: '';
  display: block;
  height: 1em;
  position: relative;
  width: 1em;
}

.vf-form__input--filter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cpath d='M136.92 136.92a10.486 10.486 0 000-14.84l-26.6-26.6a3.514 3.514 0 01-.476-4.34 59.556 59.556 0 10-18.69 18.718 3.5 3.5 0 014.34.49l26.6 26.6a10.472 10.472 0 0014.84 0zM21 59.5A38.5 38.5 0 1159.5 98 38.528 38.528 0 0121 59.5z' fill='%23707372'/%3E%3C/svg%3E");
  background-position: .5em center;
  background-repeat: no-repeat;
  background-size: 1.25rem;
  padding-left: 2em !important;

  &:focus,
  &:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cpath d='M136.92 136.92a10.486 10.486 0 000-14.84l-26.6-26.6a3.514 3.514 0 01-.476-4.34 59.556 59.556 0 10-18.69 18.718 3.5 3.5 0 014.34.49l26.6 26.6a10.472 10.472 0 0014.84 0zM21 59.5A38.5 38.5 0 1159.5 98 38.528 38.528 0 0121 59.5z' fill='%2354585a'/%3E%3C/svg%3E");
  }
}