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

// ********************************************
// elements
$el-input: #{$input-container}__input;
$el-addon: #{$input-container}__addon;
$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

.#{$input-container} {
  position: relative;
  height: $input-height;
  width: 100%;
  outline: none;
  color: color(neutral, 500);
  box-sizing: border-box;
  display: block;
  border: $border-type color(neutral, 200);
  background: color(neutral, 000);
  transition: border duration(base) easing(base);
  @include border-radius($radius);

  // FOCUS TO BE DEFINED
  &:focus-within {
    @include box-shadow(0 0 4px 0 rgba(color(brand-primary, 500),0.7));
  }

  &:focus-within,
  &:hover,
  &:active {
    @include dsFocus();

    .#{$el-addon} .#{$el-clearable-button} {
      opacity: 1;
    }
  }
}

.#{$el-input} {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  padding: 0 space(xs);

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

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

.#{$el-clearable-button} {
  opacity: 0;
  transition: duration(fast) easing(base);
  &:hover {
    opacity: 1;
  }
}

.#{$el-addon} {
  position: absolute;
  top: 0;
  height: 100%;
  @include center();

  &--left {
    left: 0;
  }
  &--right {
    right: 0;
  }
}

// ********************************************
// Disabled container & elements          *****
.#{$input-disabled} {
  border-color: color(neutral, 100);
  &:focus-within,
  &:hover {
    border-color: color(neutral, 100);
  }
  &:active {
    border-color: color(neutral, 100);
  }

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

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

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

// ********************************************
// ReadOnly container & elements          *****
.#{$input-read-only} {
  border-color: color(neutral, 100);
  cursor: not-allowed;
  .#{$el-input} {
    color: color(neutral, 500);
  }
}