@layer components {
  .workflow-stage {
    --btn-background: transparent;
    --btn-padding: 0.2em 0.5em;
    --btn-border-size: 0;
    --btn-border-radius: 0.2em;
    --hover-size: 0;

    color: inherit;
    text-transform: uppercase;

    @media (hover: hover) {
      &:hover {
        background-color: color(from var(--card-color) srgb r g b / 0.15);
      }
    }
  }

  .workflow-stage--current {
    --btn-background: var(--card-color);

    color: var(--color-ink-reversed);

    @media (hover: hover) {
      &:hover {
        background-color: color(from var(--card-color) srgb r g b / 0.65);
      }
    }

    .ticket & {
      --btn-background: var(--color-ink);

      background: var(--card-color);
      border-radius: 0.2em;
      color: var(--color-ink-reversed);
    }
  }
}