// ********************************************
// container definition
$input-container: #{$prefix}-input;

$input-addons: #{$prefix}-input-addon-wrapper;
$el-addon: #{$input-addons}__addon;

$formitem-input-variant-focus: #{$prefix}-form-item--variant-focus;
$formitem-input-variant-disabled: #{$prefix}-form-item--variant-disabled;
$formitem-input-variant-active: #{$prefix}-form-item--variant-active;
$formitem-input-variant-read-only: #{$prefix}-form-item--variant-read-only;
$formitem-input-error: #{$prefix}-form-item--error;

// ********************************************
// elements
$el-input: #{$input-container}__input;
$el-clearable-button: #{$input-container}__clearable;

// ********************************************
// modifiers
$input-error: #{$input-container}--error;
$input-disabled: #{$input-container}--disabled;
$input-read-only: #{$input-container}--readonly;
$input-fuild: #{$input-container}--fluid-width;

// ********************************************
// local
$border-type: solid 1px;
$radius: $theme-base-border-radius;
$input-height: space(m) * 1.17; // TODO: define global input sizes

@mixin withHover() {
  border: calc(#{space(xxs)} * 0.25) solid color(brand-primary, 600);
  box-shadow: inset 0 0 0 1px color(brand-primary, 300);
}

@mixin withActive() {
  border: calc(#{space(xxs)} * 0.25) solid color(brand-primary, 600);
}

@mixin withDisabled() {
  border: 1px solid color(neutral, 400);
  background: color(neutral, 080) !important;
  color: #616b7f;
  -webkit-text-fill-color: #616b7f;
  opacity: 1;
}

@mixin withReadOnly() {
  border: none;
  border-top: 1px solid color(neutral, 400);
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  background: none;
  border-radius: 0;
  color: color(neutral, 500);
}

@mixin withError() {
  border: calc(#{space(xxs)} * 0.25) solid color(danger, 900);
}

.#{$input-container} {
  position: relative;
  height: $input-height;
  width: 100%;
  outline: none;
  color: color(neutral, 800);
  box-sizing: border-box;
  display: flex;
  background: color(neutral, 000);
  transition: border duration(base) easing(base);
  padding: 0 space(xs);
  z-index: 1;
  @include border-radius($radius);
  border: $border-type color(neutral, 400);
  text-overflow: ellipsis;

  &::-ms-clear {
    display: none;
  }
  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus textarea:-webkit-autofill {
    margin: 2px;
    height: calc(#{$input-height} - 4px);
    // -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important; // fix chrome autocomplete
  }

  &:not(.floating-label-input-controller):hover {
    @include dsHover();

    &:active,
    &:focus {
      @include dsFocus();
    }
  }

  &:active {
    color: color(neutral, 800);
    @include dsActive();
  }

  @include placeholder {
    color: color(neutral, 500);
    font-style: italic;
  }

  // FOCUS TO BE DEFINED
  &:focus,
  &:focus-within {
    @include dsFocus();
  }

  &:disabled,
  &.input-disabled {
    @include withDisabled();
    @include placeholder {
      color: #5c6574;
    }
  }

  &.read-only {
    @include withReadOnly();
  }
}

.#{$input-addons} {
  &:focus-within,
  &:active {
    .#{$el-addon} .#{$el-clearable-button} {
      opacity: 1;
      @include dsFocus();
      border-left: unset;
      border-top-left-radius: unset;
      border-bottom-left-radius: unset;
      color: color(brand-primary, 600);
      background-color: transparent;
      .em-ds-icon {
        fill: color(brand-primary, 600);
      }
      &:focus {
        border: unset;
      }
    }
  }

  &:hover {
    .#{$el-addon} .#{$el-clearable-button} {
      opacity: 1;
      @include dsHover();
      color: color(brand-primary, 600);
      background-color: transparent;
      .em-ds-icon {
        fill: color(brand-primary, 600);
      }
    }
  }
}

.#{$el-input} {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
}

.#{$input-addons} {
  .#{$el-clearable-button} {
    margin-left: auto;
    opacity: 0;
    border-color: transparent;
    background: none;
    max-height: 100%;
    outline: none;
    .em-ds-icon {
      fill: color(brand-primary, 600);
    }
    &:hover,
    &:hover::after {
      opacity: 1;
      border: none;
    }
  }
}
.#{$el-clearable-button} {
  margin-left: auto;
  opacity: 0;
  border-color: transparent;
  background: none;
  .em-ds-icon {
    fill: color(brand-primary, 600);
  }
  &:hover {
    opacity: 1;
  }
}
// ********************************************
// Disabled container & elements          *****
.#{$input-disabled} {
  border-color: color(neutral, 400);
  &:focus-within,
  &:hover {
    border-color: color(neutral, 400);
  }
  &:active {
    border-color: color(neutral, 400);
  }

  .#{$el-input} {
    color: #616b7f;
    cursor: not-allowed;
  }
}

// ********************************************
// Error container & elements             *****
.#{$input-error} {
  border-color: color(danger, 900);
  &:focus,
  &:focus-within {
    @include dsFocus();
  }

  .#{$el-input} {
    color: color(neutral, 500);
  }
}

// ********************************************
// ReadOnly container & elements          *****
.#{$input-read-only} {
  .#{$el-input} {
    @include withReadOnly();
  }
}

.#{$formitem-input-variant-focus} {
  .#{$input-container} {
    @include dsFocus();
  }
}
.#{$formitem-input-variant-active} {
  .#{$input-container} {
    @include withActive();
  }
}
.#{$formitem-input-variant-disabled} {
  .#{$input-container} {
    @include withDisabled();
    @include placeholder {
      color: color(neutral, 500);
    }
  }
}
.#{$formitem-input-variant-read-only} {
  .#{$input-container} {
    @include withReadOnly();
  }
}
.#{$formitem-input-error} {
  .#{$input-container} {
    @include withError();
    &:focus,
    &:focus-within {
      @include dsFocus();
    }
  }
}

// Mobile
@include md {
  .#{$input-container} {
    height: toMobile(space(l));
    font-size: toMobile(font-size(600));
    font-weight: 400;
    -webkit-appearance: none;
  }
}