$input-b-w: 2px !default;
$input-bg: $white !default;
$input-b-col: $gray200 !default;
$input-b-col-focus: $col-prm !default;
$input-placeholder-col: $gray500 !default;
$input-b-radius: 3px !default;
$input-padding: 1em !default;
$input-padding-left-right: 1em !default;
$input-padding-top-bottom: 1em !default;

//mobile
$input-padding-top-bottom-mobile: 1em !default;
$input-padding-left-right-mobile: 1em !default;

$input-focus-box-shadow: none !default;
$inplace-fw: $fw-bold !default;
$inplace-fz: 1.4rem !default;
$inplace-font-color: $gray200 !default;
$inplace-label-transform-start: 50% !default;
$inplace-label-transform-end: -50% !default;

$input-label-padding: 0.8rem !default;

@mixin input-error {
  border-color: $col-danger;
}

@mixin input-valid {
  border-color: $col-success;
}

@mixin product-quantity {
  flex: 1 0 10rem;
  max-width: 10rem;
  padding: 0;
  .quantity {
    display: flex;
    flex-flow: row nowrap;
    cursor: pointer;
    input.minus,
    input.plus {
      padding: (0.25rem * 1.6) (0.5rem * 1.6);
      cursor: pointer;
    }
    input.qty {
      flex-grow: 1;
      max-width: 4rem;
      text-align: center;
      padding: revert;
      cursor: pointer;
    }
  }
}

@mixin input {
  background-color: $input-bg;
  padding: $input-padding;
  @if ($theme-version > 2) {
    padding: $input-padding-top-bottom $input-padding-left-right;
    @include bp("md") {
      padding: $input-padding-top-bottom-mobile $input-padding-left-right-mobile;
    }
  }
  border: $input-b-w solid $input-b-col;
  border-radius: $input-b-radius;
  transition: all 0.2s;
  outline: 0;

  &:focus {
    border-color: $input-b-col-focus;
    box-shadow: $input-focus-box-shadow;
  }
  &::placeholder {
    color: $input-placeholder-col;
  }
  &.error,
  &[aria-invalid="true"] {
    @include input-error;
  }
  & ~ label.error {
    color: $col-danger;
  }
  &.valid,
  &[aria-invalid="false"] {
    @include input-valid;
  }
}

@mixin inplace-label {
  position: absolute !important;
  background-color: $input-bg;
  color: $input-placeholder-col;
  line-height: 1em;

  padding-left: $input-label-padding;
  padding-right: $input-label-padding;
  margin: 0 0 0 (-$input-label-padding);
  width: auto !important;
  @if ($theme-version > 2) {
    font-weight: $inplace-fw;
    color: $inplace-font-color;
    font-size: $inplace-fz;
  }
  transform: translate($input-padding, $inplace-label-transform-start);
  @if ($theme-version > 2) {
    transform: translate($input-padding-left-right, $inplace-label-transform-start);
  }
  opacity: 0 !important;

  transition: all 0.2s linear !important;
  @include bp("md") {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    padding: 0 0 1rem 0 !important;
    margin: 0 !important;
  }
  & ~ *::placeholder,
  & ~ * ::placeholder {
    transition: all 0.2s ease-in !important;
  }

  &.show-inplace {
    border-radius: 2px;
    transform: translate($input-padding, $inplace-label-transform-end);
    @if ($theme-version > 2) {
      transform: translate($input-padding-left-right, $inplace-label-transform-end);
    }
    opacity: 1 !important;
    z-index: 10;

    @include bp("md") {
      transform: none !important;
    }
    & ~ *::placeholder,
    & ~ * ::placeholder {
      opacity: 0 !important;
    }
  }
}
