@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;
    inline-size: 100%;
    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-inverted);

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

  .workflow-preview {
    --border-size: 3px;

    aspect-ratio: 1;
    flex: 1 1 30%;
    max-inline-size: 33%;

    button {
      --hover-size: 0;

      appearance: none;
      aspect-ratio: 1;
      background: transparent;
      block-size: 100%;
      border: none;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 0.5em;
      inline-size: 100%;
      margin: 0;
      max-inline-size: 100%;
      outline: 0;
      padding: 1em;
      text-align: start;
    }
  }

  .workflow-preview--selected {
    --border-color: var(--color-link);
  }

  .workflow-preview__swatch {
    --btn-size: 1em;
    --btn-border-radius: 50%;
    --btn-border-size: 0;
    --hover-size: 0;

    cursor: auto;
  }
}