@import "../../style/mixins/index";


@mixin arrow($placemen) {
  &[x-placement^=#{$placemen}] .popper__arrow {
    border-#{$placemen}-color: $--x-form-item-tooltip-background !important;

    &:after {
      border-#{$placemen}-color: $--x-form-item-tooltip-background !important;
    }
  }
}

@mixin iconSize($size, $value) {
  &.el-form-item--#{$size} {
    .x-form-item__icon {
      bottom: $value;
    }
  }
}

@include b(form-item) {
  margin-bottom: $--x-form-item-margin-bottom !important;
  @include when(required) {
    .el-input__inner {
      background: $--x-form-item-required-background;
      border: 1px solid $--x-form-item-required-border-color;
    }
  }
  @include e(tooltip) {
    padding: 6px !important;
    background: $--x-form-item-tooltip-background !important;
    @include arrow(bottom);
    @include arrow(left);
    @include arrow(top);
    @include arrow(right);
  }
  @include e(icon) {
    position: absolute;
    right: 10px;
    bottom: 20px;
    color: $--x-form-item-invalid-color;
    transform: translateY(50%);
    cursor: pointer;
    z-index: 1;
    transition: none !important;
    @include when(tooltip-disabled) {
      cursor: initial;
    }
  }
  @include iconSize(small, 16px);
  @include iconSize(medium, 18px);
  @include iconSize(mini, 14px);
  .el-form-item__content {
    > .el-select, > .el-input-number, > .el-cascader, > .el-date-editor {
      width: 100%;
    }
  }
}