// -----------------------------------------------------
// Author:GuangHui
// Date:2019-0320
// -----------------------------------------------------

@charset "UTF-8";

// input[type="text"]、input[type="password"]、select、textarea
.c-Field {
  display: block;
  width: 100%;
  height: 2em;
  line-height: 2em;
  padding: 0 0.8em;
  border: 1px solid $baseBorderColor;
  transition: all 0.3s ease-in-out;
  @at-root #{&}--radius {
    border-radius: 3px;
  }
  @at-root input#{&} {
    // select如果noAppearance，chrome上会没有右侧箭头，所以只对input生效
    @extend %noAppearance;
  }
  @at-root #{&}:focus {
    // 聚焦阴影
    border-color: $mainTone;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
      0 0 8px rgba($mainTone, 0.6);
  }
  @at-root textarea#{&} {
    resize: none;
    line-height: inherit;
    height: auto;
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    word-wrap: break-word;
    word-break: break-all;
  }
  @at-root select[multiple]#{&} {
    min-height: 6em;
  }
}

// input[type="file"]、radio、checkbox是无法使用伪元素的(chrome上可能是个bug)，所以折中使用添加标签的形式来模拟
.c-File {
  @include inline-block();
  position: relative;
  cursor: pointer;
  input[type='file'] {
    display: none;
  }
}

.c-Radio {
  @include inline-block();
  cursor: pointer;
  position: relative;
  input[type='radio'] {
    // 隐藏原先radio
    display: none;
    @at-root #{&}:checked ~ .c-Radio-icon:before {
      // 选择所有前面有input[type="radio"]:checked的.c-Radio-icon:before
      opacity: 1;
    }
    @at-root #{&}[disabled] ~ .c-Radio-icon:after {
      // radio禁用，置灰
      border-color: $baseBorderColor;
    }
    @at-root #{&}[disabled] ~ .c-Radio-icon:before {
      // radio禁用，置灰
      background-color: $baseBorderColor;
    }
  }
  @at-root #{&}-icon {
    @include inline-block(-0.2em);
    width: 1em;
    height: 1em;
    overflow: hidden;
    position: relative;
    // 防止在.c-Radio-icon中有文本
    text-indent: -9999em;
    @at-root #{&}:after {
      // 外环
      content: '';
      display: block;
      width: 1em;
      height: 1em;
      position: absolute;
      top: 50%;
      right: 0;
      margin-top: -0.5em;
      border-radius: 50%;
      border: 1px solid $mainTone;
      background-color: transparent;
    }
    @at-root #{&}:before {
      // 内圆
      content: '';
      display: block;
      width: 0.5em;
      height: 0.5em;
      position: absolute;
      top: 50%;
      right: 0.25em;
      margin-top: -0.25em;
      border-radius: 50%;
      background-color: $mainTone;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }
  }
}

.c-Checkbox {
  @include inline-block();
  cursor: pointer;
  position: relative;
  input[type='checkbox'] {
    // 隐藏原先checkbox
    display: none;
    @at-root #{&}:checked ~ .c-Checkbox-icon:before {
      // 选择所有前面有input[type="checkbox"]:checked的.c-Checkbox-icon:before
      opacity: 1;
    }
    @at-root #{&}[disabled] ~ .c-Checkbox-icon:after {
      // radio禁用，置灰
      border-color: $baseBorderColor;
    }
    @at-root #{&}[disabled] ~ .c-Checkbox-icon:before {
      // radio禁用，置灰
      color: $baseBorderColor;
    }
  }
  @at-root #{&}-icon {
    @include inline-block(-0.2em);
    width: 1em;
    height: 1em;
    overflow: hidden;
    position: relative;
    // 防止在.c-Checkbox-icon中有文本
    text-indent: -9999em;
    @at-root #{&}:after {
      // 外环
      content: '';
      display: block;
      width: 1em;
      height: 1em;
      position: absolute;
      top: 50%;
      right: 0;
      margin-top: -0.5em;
      border: 1px solid $mainTone;
      background-color: transparent;
    }
    @at-root #{&}:before {
      // 内圆
      content: '\2713';
      color: $mainTone;
      // 重写父元素上继承来的text-indent
      text-indent: -0.2em;
      text-indent: -0.3em \9; // ie
      text-align: center;
      // 去除i标签自带的倾斜效果
      font-style: normal;
      font-size: 0.875em;
      font-family: $fontSong;
      display: block;
      width: 0.5em;
      height: 0.5em;
      line-height: 0.5em;
      position: absolute;
      top: 50%;
      right: 0.25em;
      margin-top: -0.25em;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }
  }
}
