@use "../mixins/function.scss" as *;
@use "../mixins/mixins.scss" as *;

@include b(form) {
  width: 100%;
  display: inline-flex;
  flex-direction: column;
}

@include b(form-item) {
  display: flex;
  box-sizing: border-box;
  font-size: getCssVar("font-size", "medium");
  margin-bottom: 20px;
  gap: 8px;
  @include when(top) {
    flex-direction: column;
    @include be(form-item, label-wrapper) {
      line-height: 1.5715;
    }
  }

  @include m(mini) {
    @include be(form-item, label-wrapper) {
      line-height: getCssVar("size", "mini");
      font-size: getCssVar("font-size", "mini");
    }
  }
  @include m(small) {
    @include be(form-item, label-wrapper) {
      line-height: getCssVar("size", "small");
    }
  }
  @include m(medium) {
    @include be(form-item, label-wrapper) {
      line-height: getCssVar("size", "medium");
    }
  }
  @include m(large) {
    @include be(form-item, label-wrapper) {
      line-height: getCssVar("size", "large");
    }
  }
  @include e(label-wrapper) {
    display: flex;
    align-items: flex-start;
  }
  @include e(label) {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  @include m(align-left) {
    justify-content: flex-start;
  }
  @include m(align-right) {
    justify-content: flex-end;
  }
  @include e(required) {
    color: getCssVar("color", "danger-6");
    display: flex;
    align-items: center;
    font-size: getCssVar("font-size", "mini");
    svg {
      display: inline-block;
      transform: scale(0.5);
    }
  }
  @include e(tooltip) {
    font-size: getCssVar("font-size", "medium");
    height: 14px;
    color: getCssVar("color", "text-3");
  }

  @include e(content-wrapper) {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  @include e(content) {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  @include e(error-msg) {
    height: 20px;
    font-size: getCssVar("font-size", "small");
    color: getCssVar("color", "danger-6");
    display: inline-flex;
    align-items: center;
  }

  @include when(error) {
    margin-bottom: 0;
  }
}