@import "../../variable.less";
@import "../../mixins/index.less";
@import "./var.less";

.@{--css-prefix}-field {
  position: relative;
  width: 100vw;
  padding: var(--field-padding-x) 36px;
  color: var(--field-label-color);
  background: rgba(255,255,255,1);
  box-sizing: border-box;

  &__overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--field-zindex);

    &--hidden {
      display: none;
    }
  }

  /* elements */
  &__container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  &__content-textarea {
    align-items: flex-start;
  }

  &__title {
    font-size: var(--field-font-size);
    height: var(--field-label-h);
    line-height: var(--field-label-h);
    text-align: left;
    color: var(--color-grey-0);

    &--required {
      label::before {
        display: inline-block;
        color: var(--color-error);
        font-size: var(--field-font-size);
        font-family: SimSun, sans-serif;
        line-height: 1;
        content: "*";
      }
    }

    &--left-icon {
      margin-right: 12px;
    }

    label {
      display: flex;
      align-items: center;
    }
  }

  &__input {
    flex: 1;
    display: inline-block;
    padding-right: var(--spacing-v-md);
    color: var(--field-text-color);
    font-size: var(--field-font-size);
    line-height: var(--line-height-zh);
    vertical-align: middle;
    .placeholder(var(--field-placeholder-color));
  }

  &__textarea {
    flex:1;
    .taro-textarea {
      padding-top: 10px;
      background: rgba(255,255,255,1);
      resize: none;
      font-size: var(--field-font-size);
      color: var(--color-grey-0);
    }
  }
 
  &__word-limit {
    position: absolute;
    bottom: 16px;
    right: 24px;
    color: #C6C6CC;
  }
  &__word-num {
    color: #2A2B2E;
  }
  
  &__box-title {
    margin-top: 0;
  }

  &__content {
    flex: 1;
    height: var(--field-label-h);
    font-size: var(--field-font-size);
    .mixin-flex-space-between();
    &-title {
      flex: 1;
      display: flex;
    }
  }

  input {
    color: var(--field-text-color);
    font-size: var(--field-font-size);
    height: calc(var(--field-font-size) * 1.4);
    line-height: var(--line-height-zh);
  }

  &__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    width: 40px;
    min-width: 40px;
    height: 100%;
    font-size: var(--field-font-size);
    text-align: center;
    line-height: 1;

    &-close {
      color: #ccc;
    }

    &-alert {
      color: #FF4949;
    }
  }

  /* modifiers */
  &--error {
    color: var(--color-error);
    font-size: var(--font-size-sm);
  }

  &--disabled {
    opacity: var(--opacity-disabled);
  }

  &--without-border {
    &::after {
      border: none;
    }
  }

  .weui-input::placeholder {
    color: var(--color-grey-2);
    font-size: var(--font-size-base);
  }

  textarea::-webkit-input-placeholder{
    color: var(--color-grey-2);
    font-size: var(--font-size-base);
  }
  textarea::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color: var(--color-grey-2);
    font-size: var(--font-size-base);
  }
  textarea:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color: var(--color-grey-2);
    font-size: var(--font-size-base);
  }
  textarea:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
    color: var(--color-grey-2);
    font-size: var(--font-size-base);
  }
  &.@{--css-prefix}-field__textarea-padding {
    padding: 0;
  }
}

.@{--css-prefix}-field.@{--css-prefix}-field-card {
  margin: auto;
  width: calc(100% - 72px);
  border-radius: 16px;
}