/**
Standardization: Input
 */
%input {
  font-family: get("font.family");
  border-radius: size(get("border.radius"));

  @if (get("element.input.border.status")) {
    border-color: get("element.input.border.color");
  }

  @extend %padding-input, %padding-input-medium;
  @extend %fill, %fill-basic, %size-medium, %placeholder;

  cursor: pointer;

  &:not([type]), &[type~="text"], &[type~="password"], &[type~="number"], &[type*="date"] {
    &:focus {
      background-color: var(--white) !important;
      border: size(1px) solid var(--primary) !important;
      color: var(--dark-900) !important;
    }
  }

  @each $type in get("type") {
    @if ($type!=fill) {
      &.#{$type} {
        @extend %#{$type}, %#{$type}-basic;
      }
    }
  }

  &.light {
    color: var(--neutral-1000);
  }

  &.icon-left {
    &::before {
      left: size(-1px);
    }
  }

  &.icon-right {
    &::before {
      right: size(-1px);
    }
  }

  &.bordered {
    @extend %bordered, %bordered-basic;

    @each $color, $value in get("color.list") {
      &.#{""+$color} {
        @extend %bordered-#{""+$color};
      }
    }
  }
}

%textarea {
  height: auto !important;
  line-height: normal;
  padding: size(get("element.input.size.medium.padding"));

  @each $size, $value in get("element.input.size") {
    &.#{$size} {
      // padding: size(map-get($value, padding));
    }
  }

  &.bordered {
    @extend %bordered, %bordered-basic;

    @each $color, $value in get("color.list") {
      &.#{""+$color} {
        @extend %bordered-#{""+$color};
      }
    }
  }
}
