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

@include b(text) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;

  @include e(label) {
    flex: 1;
    min-width: 0;
    max-width: 100%;

    @include when(ellipsis) {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    @include when(line-clamp) {
      display: -webkit-inline-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }

  @include m(default) {
    color: getCssVar("color", "text-1");
    @include be(text, bar) {
      background-color: getCssVar("color", "primary-6");
    }
  }

  @each $type in $type-list {
    @include m(#{$type}) {
      color: getCssVar("color", #{$type}-6);
      @include be(text, bar) {
        background-color: getCssVar("color", #{$type}-6);
      }
    }
  }

  @each $size in $size-list {
    @include m(#{$size}) {
      font-size: getCssVar("font-size", $size);
      line-height: getCssVar("line-height", $size);
      @include this-is(edit) {
        line-height: getCssVar("size", $size);
      }
    }

    @include e(bar) {
      height: getCssVar("font-size", $size);
      width: 3px;
      margin-right: 8px;
      border-radius: getCssVar("radius", $size);
    }

    @include e(copy) {
      font-size: getCssVar("font-size", $size);
      line-height: getCssVar("line-height", $size);
    }
  }

  @include e(edit) {
    display: inline-flex;
    align-items: center;
  }

  @include e(edit-icon) {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    cursor: pointer;
  }

  @include e(copy-icon) {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    cursor: pointer;
  }

  @include e(copy-done) {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    color: getCssVar("color", "success-6");
  }
}