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

@include b(color-picker) {
  display: flex;
  flex-direction: row;

  @include e(text) {
    width: auto;
    margin-right: 20px;
    font-size: getCssVar("font-size", "base");
    color: getCssVar("text-color", "regular");
    height: 1.7em;
    line-height: 1.7em;
  }
  @include e(required) {
    color: red;
  }
  @include e(content) {
    position: relative;
    flex: 1;
  }
  @include e(input) {
    height: 1.7em;
    line-height: 1.7em;
    display: inline-flex;
    width: 164px;
    position: absolute;
    left: 0;
    border-radius: getCssVar("border-radius", "base");
    cursor: pointer;
    border: 1px solid getCssVar("border-color", "light");
  }
  .el-color-picker {
    height: 1.7em;
    line-height: 1.7em;
    display: inline-flex;
    width: 164px;
    border-radius: getCssVar("border-radius", "base");
    cursor: pointer;
    border: 1px solid getCssVar("border-color", "light");
    position: absolute;
    left: 0;
    .el-color-picker__trigger {
      width: 100% !important;
      height: 100% !important;
      border: none;

      .el-color-picker__color {
        visibility: hidden;
      }
    }
  }
}