/*********************
 * Pigment *
 * Previously known as the Fill system"
 *********************/

/* Use splendidFills plugin to generate colours with the Fill system.
Usage with the Fill System
--bg-color
--bg-hover-color
--bg-focus-color
--bg-active-color
--bg-selected-color
--text-color
--text-hover-color
--text-focus-color
--text-active-color
--text-selected-color
--border-color
--border-hover-color
--border-focus-color
--border-active-color
--border-selected-color
--stroke-color
--stroke-hover-color
--stroke-focus-color
--stroke-active-color
*/

/*********************
 * Pigment scaffolds *
 *********************/
@utility pigment-scaffold {
  @apply transition-scaffold;
  --_bgc: var(--bg-color);
  --_tc: var(--text-color, currentcolor);
  --_bc: var(--border-color, currentcolor);
  border-color: var(--_bc, currentcolor);
  color: var(--_tc);
  background: var(--_bgc);
}

@utility pigment-svg-scaffold {
  --_fc: var(--fill-color);
  --_sc: var(--stroke-color, var(--text-color, currentcolor));

  :where(svg path) {
    @apply transition-scaffold;
    fill: var(--_fc, revert-layer);
    stroke: var(--_sc, currentcolor);
  }
}

@utility pigment-hover-scaffold {
  &:hover {
    --_bgc: var(--bg-hover-color, var(--bg-color));
    --_tc: var(--text-hover-color, var(--text-color));
    --_bc: var(--border-hover-color, var(--border-color));
  }
}

@utility pigment-hover-svg-scaffold {
  &:hover {
    --_fc: var(--fill-hover-color, var(--fill-color));
    --_sc: var(--stroke-hover-color, var(--_tc));
  }
}

@utility pigment-focus-scaffold {
  &:focus {
    --_bc: var(
      --border-focus-color,
      var(--border-hover-color, var(--border-color))
    );
    --_tc: var(--text-focus-color, var(--text-hover-color, var(--text-color)));
    --_bgc: var(--bg-focus-color, var(--bg-hover-color, var(--bg-color)));
  }
}

@utility pigment-focus-svg-scaffold {
  &:focus {
    --_fc: var(--fill-focus-color, var(--fill-color));
    --_sc: var(--stroke-focus-color, var(--_tc));
  }
}

@utility pigment-active-scaffold {
  &:active {
    --_bc: var(--border-active-color, var(--border-color));
    --_tc: var(--text-active-color, var(--text-color));
    --_bgc: var(--bg-active-color, var(--bg-color));
  }
}

@utility pigment-active-svg-scaffold {
  &:active {
    --_fc: var(--fill-active-color, var(--fill-color, revert-layer));
    --_sc: var(--stroke-active-color, var(--_tc));
  }
}

@utility pigment-selected-scaffold {
  &.selected,
  &.checked,
  &[aria-current],
  &[aria-selected='true'],
  &[aria-pressed='true'],
  &[aria-expanded='true'] {
    --_bc: var(--border-selected-color, var(--border-color));
    --_tc: var(--text-selected-color, var(--text-color));
    --_bgc: var(--bg-selected-color, var(--bg-color));
  }
}

@utility pigment-selected-svg-scaffold {
  &.selected,
  &.checked,
  &[aria-current],
  &[aria-selected='true'],
  &[aria-pressed='true'],
  &[aria-expanded='true'] {
    --_fc: var(--fill-selected-color, var(--fill-color, revert-layer));
    --_sc: var(--stroke-selected-color, var(--_tc));
  }
}

/*********************
 * Actual pigment utility *
 *********************/

@utility pigment-without-border {
  @apply pigment-scaffold;
  @apply pigment-hover-scaffold;
  @apply pigment-focus-scaffold;
  @apply pigment-active-scaffold;
  @apply pigment-selected-scaffold;
}

@utility pigment {
  @apply border-scaffold;
  @apply pigment-scaffold;
  @apply pigment-hover-scaffold;
  @apply pigment-focus-scaffold;
  @apply pigment-active-scaffold;
  @apply pigment-selected-scaffold;
}

@utility pigment-svg {
  @apply pigment-svg-scaffold;
  @apply pigment-hover-svg-scaffold;
  @apply pigment-focus-svg-scaffold;
  @apply pigment-active-svg-scaffold;
  @apply pigment-selected-svg-scaffold;
}

@utility pigment-with-svg {
  @apply border-scaffold;
  @apply pigment-scaffold;
  @apply pigment-svg-scaffold;
  @apply pigment-hover-scaffold;
  @apply pigment-hover-svg-scaffold;
  @apply pigment-focus-scaffold;
  @apply pigment-focus-svg-scaffold;
  @apply pigment-active-scaffold;
  @apply pigment-active-svg-scaffold;
  @apply pigment-selected-scaffold;
  @apply pigment-selected-svg-scaffold;
}

/*********************
 * Additional utilities *
 *********************/
@utility pigment-outline {
  --bg-color: transparent;
}

@utility pigment-ghost {
  --bg-color: transparent;
  --border-color: transparent;
}