brk/website_next/wallets/hold/style.css

main[data-page="wallets"] {
  [data-wallet="hold"] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: color-mix(in oklch, var(--gray) 76%, transparent);
    background: transparent;
    --hold-progress: 0;
    --hold-progress-width: 0%;

    &::before,
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0;
    }

    &::before {
      z-index: -1;
      background: var(--red);
      transform: scaleX(var(--hold-progress));
      transform-origin: left;
    }

    &::after {
      content: attr(data-label);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: inherit;
      color: var(--black);
      pointer-events: none;
      white-space: nowrap;
      clip-path: inset(0 calc(100% - var(--hold-progress-width)) 0 0);
    }

    span {
      color: inherit;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover:not([data-holding]) {
        color: var(--red);
        background: transparent;
      }
    }

    &:is(:focus-visible, :active, [data-press]):not([data-holding]) {
      color: var(--red);
      background: transparent;
    }

    &[data-active] {
      color: var(--red);
    }

    &[data-active]::before,
    &[data-active]::after {
      opacity: 1;
    }
  }
}