:host {
  display: block;
  position: relative;
  width: 8rem;
}
.bg {
  width: 8rem;
  color: var(--main-color);
  background: var(--main-bg-color);
  box-shadow: 0px 0px 1px 0px var(--main-color);
  border-radius: 4px;
}
.fg {
  width: 8rem;
  position: absolute;
  top: 0;
}
.crop {
  width: 4rem;
  overflow: hidden;
}
.btn {
  width: 8rem;
  --progress: 50%;
  mask-image: linear-gradient(to right, black var(--progress), transparent var(--progress));
}
button {
  span {
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
  }
}
