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

    color: inherit;
    inline-size: 100%;
    justify-content: flex-start;
    text-transform: uppercase;

    @media (hover: hover) {
      &:hover {
        --btn-background: 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 {
        --btn-background: var(--card-color);
      }
    }
  }

  @supports(mask: radial-gradient(black)) {
    .workflow-stage--stream:before {
      background: white;
      content: "";
      inset: 0;
      mask: var(--wavy-background-mask);
      position: absolute;
      z-index: 0;
      opacity: 0.25;
    }
  }

  /* Workflow settings
  /* ------------------------------------------------------------------------ */

  .workflow-preview {
    --border-size: 0.2em;

    aspect-ratio: 1;
    border: 0.2em solid var(--color-ink-lighter);
    flex: 1 1 30%;
    max-inline-size: 30%;

    @media (any-hover: hover) {
      &:hover:not(.workflow-preview--selected) {
        border-color: var(--color-ink-light);
      }
    }

    button {
      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;
      overflow: hidden;
      padding: var(--inline-space);
      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;

    cursor: auto;
  }

  .workflow__swatch-btn {

    @media (any-hover: hover) {
      &:hover {
        filter: brightness(0.9);
      }
    }
  }
}