@import '../styles/theme.scss';
@import '../Typography/Typography.scss';

@function tint($color, $percent) {
  @return mix($paletteCommonWhite, $color, $percent);
}

$hd: 2; // 基本单位

/* Color */
$color-success: $paletteSuccessMain;
$color-error: $paletteErrorMain;
$color-warning: $paletteWarningMain;
$color-info: $palettePrimaryMain;

$color-grey-0: $paletteGrey900;
$color-grey-1: $paletteGrey700;
$color-grey-2: $paletteGrey500;
$color-grey-3: $paletteGrey300;
$color-grey-4: $paletteGrey200;
$color-grey-5: $paletteGrey100;
$color-grey-6: $paletteGrey50;

/* Text Color */
$color-text-base: $paletteTextPrimary; // 文字的基本色
$color-text-base-inverse: $paletteTextPrimary2; // 反色
$color-text-secondary: $paletteTextSecondary; // 辅助色
$color-text-placeholder: $paletteTextDisabled;
$color-text-disabled: $paletteTextDisabled;
$color-text-title: $paletteTextPrimary; // 文章标题
$color-text-paragraph: $paletteTextPrimary; // 文章段落

/* 边框颜色 */
$color-border-base: $paletteGrey300;
$color-border-split: $paletteTextDivider; // 分割线
$color-border-light: tint($color-border-base, 30%);
$color-border-lighter: tint($color-border-base, 50%);
$color-border-lightest: tint($color-border-base, 80%);
$color-border-grey: $paletteGrey300;

/* 透明度 */
$opacity-disabled: 0.38; // Button 等组件禁用态的透明度

/* Font */
$font-size-xs: 10px * $hd; // 非常用字号，用于标签
$font-size-sm: 12px * $hd; // 用于辅助信息
$font-size-base: 14px * $hd; // 常用字号
$font-size-lg: 16px * $hd; // 常规标题
$font-size-xl: 18px * $hd; // 大标题
$font-size-xxl: 20px * $hd; // 用于大号的数字

/* Line Height */
$line-height-base: 1; // 单行
$line-height-en: 1.3; // 英文多行
$line-height-zh: 1.5; // 中文多行

/* 水平间距 */
$spacing-h-sm: 5px * $hd;
$spacing-h-md: 8px * $hd;
$spacing-h-lg: 12px * $hd;
$spacing-h-xl: 16px * $hd;

/* 垂直间距 */
$spacing-v-xs: 3px * $hd;
$spacing-v-sm: 6px * $hd;
$spacing-v-md: 9px * $hd;
$spacing-v-lg: 12px * $hd;
$spacing-v-xl: 15px * $hd;

// 默认主题下 $color-border-lighter
@mixin border-thin(
  $color: $color-border-lighter,
  $style: solid,
  $directions: top bottom right left,
  $width: 1px
) {
  @each $value in $directions {
    border-#{$value}: $width $color $style;
  }
}

@mixin border-thin-top($color: $color-border-lighter, $style: solid, $width: 1px) {
  @include border-thin($color, $style, top, $width);
}

@mixin border-thin-left($color: $color-border-lighter, $style: solid, $width: 1px) {
  @include border-thin($color, $style, left, $width);
}

@mixin border-thin-right($color: $color-border-lighter, $style: solid, $width: 1px) {
  @include border-thin($color, $style, right, $width);
}

@mixin border-thin-bottom($color: $color-border-lighter, $style: solid, $width: 1px) {
  @include border-thin($color, $style, bottom, $width);
}

/**
 * 设置placeholder 颜色
 */
@mixin placeholder {
  @at-root .placeholder {
    color: $color-grey-3;
  }

  &::placeholder {
    color: $color-grey-3;
  }
}

.at-input {
  flex: 1;
  color: $color-text-base;
  margin: 0px #{$spacingUnit}px 0px #{$spacingUnit}px;

  &.normal {
    margin-top: #{$spacingUnit * 4}px;
    margin-bottom: #{$spacingUnit * 2}px;
  }
  &.dense {
    margin-top: #{$spacingUnit * 2}px;
    margin-bottom: #{$spacingUnit}px;
  }

  &__root {
    display: flex;
    align-items: center;
    width: 100%;
  }
  &__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
  }
  &__required {
    margin-left: #{$spacingUnit}px;
    color: #{$paletteSecondaryMain};
  }
  &__title {
    vertical-align: middle;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
  }
  &__box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    @include border-thin($paletteTextDivider, solid, bottom, 1px);

    &.multiline {
      @include border-thin($paletteTextDivider, solid, top bottom right left, 1px);
      margin-top: #{$spacingUnit}px;
    }
  }

  &__input,
  &__textarea {
    flex: 1;
    display: inline-block;
    vertical-align: middle;
    @include placeholder;
    @extend .typography, .subheading;
  }

  input {
    height: auto !important;
    min-height: auto !important;
  }

  textarea {
    min-height: 150px;
  }

  &__icon {
    display: inline-block;
    padding: #{$spacingUnit}px;
    text-align: center;
    line-height: 1;
    font-size: $font-size-lg;
  }

  &__start-adornment {
    display: inline-flex;
    @include border-thin-right;
    padding: 0 $spacing-v-md 0 0;
    color: $paletteTextHint;
    font-size: $font-size-lg;
    text-align: center;

    &::hover,
    &::focus {
      color: $palettePrimaryLight;
      @include border-thin-right($palettePrimaryLight);
    }
  }

  &__children,
  &__end-adornment {
    display: inline-flex;
    @include border-thin-left;
    padding: 0 0 0 $spacing-v-md;
    color: $paletteTextHint;
    font-size: $font-size-lg;
    text-align: center;
    &::hover,
    &::focus {
      color: $palettePrimaryLight;
      @include border-thin-left($palettePrimaryLight);
    }

    > view,
    div,
    span,
    text,
    image,
    .taro-img {
      display: inline-block;
    }

    > image,
    img,
    .taro-img {
      display: inline-block;
      width: 145px;
      height: 60px;
      vertical-align: middle;
    }
  }

  &__children {
    padding: 0 0;
  }

  &__desc {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    min-height: 34rpx;
    margin-top: #{$spacingUnit}px;

    &_icon {
      margin-right: #{$spacingUnit}px;
    }
    &.primary {
      color: $palettePrimaryMain;
    }
    &.secondary {
      color: $paletteSecondaryMain;
    }
    &.progress {
      color: $paletteProgressMain;
    }
    &.warning {
      color: $paletteWarningMain;
    }
    &.success {
      color: $paletteSuccessMain;
    }
    &.error {
      color: $paletteErrorMain;
    }
    .auto {
      flex: 1;
      text-align: right;
    }
  }

  &--error {
    color: $color-error;
    .at-input__box {
      @include border-thin($color-error, solid, bottom, 2px);
      &.multiline {
        @include border-thin($color-error, solid, top bottom right left, 2px);
      }
    }
  }

  &--disabled {
    opacity: $opacity-disabled;
    .at-input__box {
      @include border-thin($paletteTextDivider, dashed, bottom, 1px);
      &.multiline {
        @include border-thin($paletteTextDivider, dashed, top bottom right left, 1px);
      }
    }
  }

  &--readonly {
    opacity: 1 !important;
    .at-input__box {
      @include border-thin($paletteTextDivider, solid, bottom, 1px);
      &.multiline {
        @include border-thin($paletteTextDivider, solid, top bottom right left, 1px);
      }
    }
  }

  &--focus {
    color: $palettePrimaryMain;
    .at-input__box {
      @include border-thin($palettePrimaryMain, solid, bottom, 2px);

      &.multiline {
        @include border-thin($palettePrimaryMain, solid, top bottom right left, 2px);
      }
    }
  }

  &--without-border {
    border: none;

    .at-input__box {
      border: none;
      &.multiline {
        border: none;
      }
    }

    .at-input--error,
    .at-input--disabled,
    .at-input--readonly,
    .at-input--focus {
      .at-input__box {
        border: none;
        &.multiline {
          border: none;
        }
      }
    }
  }

  // &::hover, &::focus,
}