:root {
  --m-progress-val-color: #171717;
  --m-progress-main-h: 7px;
  --m-progress-per-color: white;
  --m-progress-per-text-shadow-color: black;
}

html[dark] {
  --m-progress-val-color: #d3d3d3;
  --m-progress-per-color: black;
  --m-progress-per-text-shadow-color: white;
}

.m-progress {
  --m-progress-h: calc(var(--m-progress-main-h) + 10px);
  --m-progress-w: calc(var(--m-progress-h) * 11);
  height: var(--m-progress-h);
  width: var(--m-progress-w);
  display: inline-grid;
  grid-template-areas: "progress";
}

.m-border.m-progress-border {
  --m-border-bg: unset;
  backdrop-filter: unset;
  height: var(--m-progress-h);
  width: var(--m-progress-w);
  grid-area: progress;
}


.m-progress-main {
  grid-area: main;
  height: var(--m-progress-main-h);
  width: 100%;
  -webkit-appearance: none;

  &::-webkit-progress-bar {
    background: unset;
  }

  &::-webkit-progress-value {
    background-color: var(--m-progress-val-color);
  }
}

.m-progress-info, .m-progress-per {
  grid-area: progress;
}

.m-progress-per {
  color: var(--m-progress-per-color);
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: var(--m-progress-h);
  text-shadow: -1px -1px 0 var(--m-progress-per-text-shadow-color),
  1px -1px 0 var(--m-progress-per-text-shadow-color),
  -1px 1px 0 var(--m-progress-per-text-shadow-color),
  1px 1px 0 var(--m-progress-per-text-shadow-color);
  font-size: 14px;
}