@import '../mixin/flex.scss';
@import '../mixin/color.scss';

@mixin required {
  &.se-input-required {
    ::before {
      content: '*';
      color: $red;
    }
  }
}

@mixin name {
  .se-input-name {
    min-width: 80rpx;

    &::after {
      content: '：';
    }
  }
}

@mixin icon {
  .se-input-icon {
    font-size: 20rpx;
  }
}

@mixin input {
  .se-input-inner {
    -webkit-appearance: none;
    flex: 1;
    width: 100%;
    height: 100%;
    background-color: transparent;
    color: $c-99;

    &::-webkit-input-placeholder {
      color: $c-99;
    }

    &:disabled {
      -webkit-opacity: 1;
      -webkit-text-fill-color: $c-99;
      background-color: transparent;
      color: $c-99;
    }
  }
}

.se {
  &-input {
    &-s {
      @include flex-h-c;
      @include required;
      @include name;
      @include icon;
      @include input;
      height: 30rpx;
    }

    &-m {
      @include flex-h-c;
      @include required;
      @include name;
      @include icon;
      @include input;
      height: 40rpx;
    }

    &-l {
      @include flex-h-c;
      @include required;
      @include name;
      @include icon;
      @include input;
      height: 50rpx;
    }
  }

  &-textarea {
    @include flex-h-c;
    @include required;
    @include name;
    @include icon;
    @include input;
  }
}