.x-color {
  --x-color-outline-color: var(--color-accent);

  display: inline-flex;

  :where(input) {
    inline-size: var(--x-color-size);
    block-size: var(--x-color-size);
    border-radius: var(--x-color-border-radius);
    outline:
      var(--x-color-outline-width, 1px) solid
      color-mix(
        in var(--x-color-outline-color-space, srgb),
        var(--x-color-outline-color) var(--x-color-outline-color-opacity, 0%),
        var(--x-color-outline-color-mix, transparent)
      );
    outline-offset: var(--x-color-outline-offset);
    display: inline-grid;

    &::before,
    &::after {
      border: 1px solid transparent;
      border-radius: inherit;
      grid-area: 1/-1;
      content: "";
    }

    &::before {
      background-color: var(--x-color-primary);
    }

    &::after {
      background-color: var(--x-color-secondary);
      clip-path: polygon(100% 0, 100% 100%, 0 100%);
    }
  }
}