brk/website_next/cube/style.css

[data-cube="mark"] {
  --size: 1rem;
  --empty-alpha: 0.4;
  --step: 0.033;
  --width: calc(var(--size) * sqrt(3));
  --height: calc(var(--size) * 2);
  --face-base: currentColor;
  --face-top: var(--face-base);
  --face-right: oklch(from var(--face-base) calc(l - var(--step) * 2) c h);
  --face-left: oklch(from var(--face-base) calc(l - var(--step)) c h);
  --face-bottom: oklch(from var(--face-base) calc(l - var(--step) * 3) c h);
  --is-empty: round(down, calc(1 - var(--fill)), 1);

  display: inline-block;
  position: relative;
  flex-shrink: 0;
  width: var(--width);
  height: var(--height);
  overflow: hidden;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

  [data-face] {
    position: absolute;
    inset: 0;
  }

  [data-role="liquid"] {
    background: var(--face-color);
    transform: translateY(calc((1 - var(--fill)) * 50%));
    opacity: calc(1 - var(--is-empty));
  }

  [data-role="glass"] {
    background: oklch(from var(--face-color) l c h / var(--empty-alpha));
  }

  [data-side="bottom"] {
    --face-color: var(--face-bottom);
    clip-path: polygon(50% 50%, 100% 75%, 50% 100%, 0 75%);
  }

  [data-side="top"] {
    --face-color: var(--face-top);
    clip-path: polygon(50% 0, 100% 25%, 50% 50%, 0 25%);
  }

  [data-side="right"] {
    --face-color: var(--face-right);
    clip-path: polygon(100% 25%, 100% 75%, 50% 100%, 50% 50%);
  }

  [data-side="left"] {
    --face-color: var(--face-left);
    clip-path: polygon(0 25%, 50% 50%, 50% 100%, 0 75%);
  }

  [data-side="rear-right"] {
    --face-color: var(--face-left);
    clip-path: polygon(50% 50%, 100% 75%, 100% 25%, 50% 0);
  }

  [data-side="rear-left"] {
    --face-color: var(--face-top);
    clip-path: polygon(50% 50%, 0 75%, 0 25%, 50% 0);
  }
}

@keyframes cube-fill {
  from {
    --fill: 0.01;
  }
  to {
    --fill: 1;
  }
}

@property --fill {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}