brk/website_next/wallets/start/reset/style.css

main.wallets {
  .start {
    .reset {
      position: relative;
      isolation: isolate;
      justify-self: start;
      overflow: hidden;
      width: 100%;
      border-color: transparent;
      color: color-mix(in oklch, var(--gray) 76%, transparent);
      background: transparent;
      font-size: var(--font-size-sm);
      --reset-progress: 0;
      --reset-progress-width: 0%;

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

      &::before {
        z-index: -1;
        background: var(--red);
        transform: scaleX(var(--reset-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(--reset-progress-width)) 0 0);
      }

      span {
        color: inherit;
      }

      &:is(:hover, :focus-visible, :active):not(.holding) {
        color: var(--red);
        background: transparent;
      }

      &.active {
        color: var(--red);
      }

      &.active::before,
      &.active::after {
        opacity: 1;
      }
    }
  }
}