@import "./src/common/var.less";
@import "./src/common/mixins.less";

@text-css-prefix: ~"@{css-prefix}text";

.text-size(@height;@font-size;@border-radius) {
  height: @height;
  font-size: @font-size;
  border-radius: @border-radius;
}

.text-color(@color; @background; @border) {
  background-color: tint(@background, 50%);
  border-color: @border;
  color: @color;
}

.text-variant(@color; @background; @border) {
  background-color: tint(@background, 100%);
  border-color: tint(@border, 50%);
  color: @color;

  &.tac {
    text-align: center;
  }
  &.tar {
    text-align: right;
  }

  &:focus {
    border-color: tint(@border, 30%);
  }

  &.is-disabled {
    cursor: not-allowed;
    background-color: tint(@background, 80%);
    border-color: tint(@border, 60%);
    color: tint(@color, 50%);

    &::-webkit-input-placeholder {
      color: tint(@color, 50%);
    }

    &::-moz-placeholder {
      color: tint(@color, 50%);
    }

    &::-moz-placeholder {
      color: tint(@color, 50%);
    }

    &::-ms-input-placeholder {
      color: tint(@color, 50%);
    }
  }
}

.@{text-css-prefix} {
  .mixin-border-box;
  width: 180px;
  display: inline-block;
  line-height: normal;
  position: relative;

  &-prefix {
    .mixin-horizontal-vertical;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 30px;
  }

  &-suffix {
    .mixin-horizontal-vertical;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
  }

  &-clear {
    cursor: pointer;
    color: @color-text-7;

    &:hover {
      color: @color-text-5;
    }

    &:active {
      color: @color-text-7;
    }
  }

  &-size {
    &-large {
      font-size: @text-large-font-size;
    }

    &-small {
      font-size: @text-small-font-size;
    }

    &-mini {
      font-size: @text-mini-font-size;
    }
  }

  &-inner {
    .mixin-border-box;
    .mixin-default;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    margin-bottom: 0;
    width: 100%;
    font-weight: @text-font-weight;
    vertical-align: middle;
    touch-action: manipulation;
    background-image: none;
    border: 1px solid @text-default-border;
    color: @text-default-color;
    padding: 0 10px;

    .text-size(@text-default-height; @text-default-font-size; @text-default-border-radius);

    &:focus {
      outline: 0;
    }

    &-size {
      &-large {
        .text-size(@text-large-height; @text-large-font-size; @text-large-border-radius);
      }

      &-small {
        .text-size(@text-small-height; @text-small-font-size; @text-small-border-radius);
      }

      &-mini {
        .text-size(@text-mini-height; @text-mini-font-size; @text-mini-border-radius);
      }
    }

    &-prefix {
      padding-left: 30px;
    }

    &-suffix {
      padding-right: 30px;
    }

    &.is-rectangle {
      -webkit-border-radius: 0;
      border-radius: 0;
    }

    &.is-round {
      -webkit-border-radius: 100px;
      border-radius: 100px;
    }

    &-type {
      &-default {
        background-color: @text-default-fill;
        border-color: @text-default-border;
        color: @text-default-color;

        &.tac {
          text-align: center;
        }

        &.tar {
          text-align: right;
        }

        &:focus {
          border-color: tint(@text-default-focus-border, 60%);
        }

        &.is-disabled {
          cursor: not-allowed;
          background-color: tint(@text-default-border, 70%);
          border-color: tint(@text-default-border, 30%);
          color: tint(@text-default-color, 70%);

          &::-webkit-input-placeholder {
            color: tint(@text-default-color, 60%);
          }

          &::-moz-placeholder {
            color: tint(@text-default-color, 60%);
          }

          &::-moz-placeholder {
            color: tint(@text-default-color, 60%);
          }

          &::-ms-input-placeholder {
            color: tint(@text-default-color, 60%);
          }
        }
      }

      &-success {
        .text-variant(@text-success-color; @text-success-fill; @text-success-border);
      }

      &-error {
        .text-variant(@text-error-border; @text-error-fill; @text-error-border);
      }
    }
  }

  &-multi {
    display: block;

    &-inner {
      min-height: @text-default-height;
      line-height: 1.5;
      width: @text-multi-width;
      padding: 6px 8px;

      &.is-resize {
        resize: none;
      }
    }
  }
}