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

// ********************************************
// elements
$el-input: #{$input-container}__textarea;
$el-wrapper: #{$input-container}-wrapper;
$el-counter: #{$prefix}-counter__textarea;
// ********************************************
// modifiers
$input-error: #{$input-container}--error;
$input-disabled: #{$input-container}--disabled;
$input-read-only: #{$input-container}--readonly;

// ********************************************
// local
$border-type: solid 1px;
$radius: $theme-base-border-radius;
$min-height: space(m) * 1.17;

.#{$el-wrapper}{
  width: 100%;
  display: flex;
}

.#{$input-container} {
  position: relative;
  width: 100%;
  outline: none;
  color: color(neutral, 500);
  display: flex;
  // border: $border-type color(neutral, 200);
  background: color(neutral, 000);
  transition: border duration(base) easing(base);
  @include border-radius($radius);
  box-shadow: inset 0 0 0 1px color(neutral, 400);
  padding: 1px;
  &:focus-within {
    padding: 0;
  }
  &:hover{
    @include dsFakeActive();
  }
  &--error{
    box-shadow: inset 0 0 0 1px color(danger, 900);
  }
}

.#{$el-input} {
  min-height: $min-height;
  width: 100%;
  outline: none;
  border: none;
  padding: space(xxs) space(xs);
  overflow: auto;
  background: none;
  &:focus {
    @include dsFocus();
  }



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

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

// ********************************************
// 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);
  }
}

.#{$el-counter}{
  text-align: right;
  padding: space(xxs);
  span {
    margin: 0 space(xxs) * 0.3;
  }
  &--limit-error{
    color: color(danger, 900);
  }
}

// Mobile
@include md {
  .#{$el-input} {
    font-size: toMobile(font-size(600));
    font-weight: 400;
    min-height: toMobile(space(xxl));
  }
}