:root {
  --m-progress-width: 300px;
  --m-progress-height: unset;
}

.m-progress, .m-progress-border {
  --m-progress-real-width: calc(var(--m-progress-width, 556px));
  --m-progress-real-height: var(--m-progress-height, 37px);
  --m-progress-bg-width: var(--m-progress-width, 556px);
  --m-progress-bg-size: calc(var(--m-progress-bg-width) / 2) var(--m-progress-height);
  --m-progress-leaf-height: var(--m-progress-leaf-height, 28px);
  --m-progress-per-width: var(--m-progress-per-width, 80px);
  --m-progress-per-height: max(var(--m-progress-per-height, 20px), var(--m-progress-leaf-height));
  --m-progress-per-font-size: var(--m-progress-per-font-size, 16px);
}


.m-progress-border {
  display: inline-block;
  width: var(--m-progress-real-width);
}

.m-progress-per {
  position: relative;
  display: inline-block;
  width: var(--m-progress-per-width);
  height: var(--m-progress-per-height);
  line-height: var(--m-progress-per-height);
  top: calc(var(--m-progress-per-height) * 0.4);
  font-size: var(--m-progress-per-font-size);
  font-weight: bold;

  & img, & span {
    float: right;
  }
}

.m-progress-leaf {
  height: var(--m-progress-leaf-height);
}

.m-progress {
  width: var(--m-progress-real-width);
  height: var(--m-progress-real-height);
  -webkit-appearance: none;

  &::-webkit-progress-bar {
    background: url('./assets/bamboo_bg.webp') repeat-x;
    background-size: var(--m-progress-bg-size);
  }

  &::-webkit-progress-value {
    background: url('./assets/bamboo.webp') repeat-x;
    background-size: var(--m-progress-bg-size);
  }
}