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

@include b(meter-group) {
  width: 100%;
  box-sizing: border-box;
  @include e(wrapper) {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  @include m(position-top) {
    flex-direction: column-reverse;
  }
  @include e(progress) {
    background-color: getCssVar("color", "fill-2");
    border-radius: getCssVar("radius", "round");
    display: flex;
    align-items: center;
    overflow: hidden;

    @include when(reverse) {
      flex-direction: row-reverse;
      @include be(meter-group, value) {
        &:last-child {
          border-radius: getCssVar("radius", "round") 0 0 getCssVar("radius", "round");
        }
      }
    }
  }
  @include e(value) {
    &:last-child {
      border-radius: 0 getCssVar("radius", "round") getCssVar("radius", "round") 0;
    }
  }
  @include e(item) {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  @include m(align-center) {
    justify-content: center;
  }
  @include m(align-start) {
    justify-content: flex-start;
  }
  @include m(align-end) {
    justify-content: flex-end;
  }
  @include e(label) {
    font-size: getCssVar("font-size", "medium");
    color: getCssVar("color", "text-1");
    display: flex;
    align-items: center;
    gap: 8px;
  }
  @include e(icon) {
    height: 14px;
    width: 14px;
    font-size: getCssVar("font-size", "medium");
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @include e(dot) {
    height: 8px;
    width: 8px;
    border-radius: getCssVar("radius", "round");
  }
  @include when(vertical) {
    height: 100%;
    width: fit-content;
    @include be(meter-group, wrapper) {
      height: 100%;
      flex-direction: row;
      gap: 12px;
    }
    @include bm(meter-group, position-left) {
      flex-direction: row-reverse;
      @include be(meter-group, item) {
        align-items: flex-end;
      }
      @include be(meter-group, label) {
        flex-direction: row-reverse;
      }
    }
    @include be(meter-group, progress) {
      flex-direction: column;
      @include when(reverse) {
        flex-direction: column-reverse;
        @include be(meter-group, value) {
          &:last-child {
            border-radius: getCssVar("radius", "round") getCssVar("radius", "round") 0 0;
          }
        }
      }
    }
    @include be(meter-group, value) {
      &:last-child {
        border-radius: 0 0 getCssVar("radius", "round") getCssVar("radius", "round");
      }
    }
    @include be(meter-group, item) {
      flex-direction: column;
      align-items: flex-start;
    }
  }
}