@layer env.components {
  .env-color-swatch {
    --env-color-swatch-size: 1rem;
    --env-color-swatch-checker: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: var(--env-space-2);
    min-inline-size: 0;
    vertical-align: middle;
  }
  .env-color-swatch[data-size='sm'] {
    --env-color-swatch-size: 0.75rem;
    --env-color-swatch-checker: 0.375rem;
  }
  .env-color-swatch-sample {
    flex-shrink: 0;
    inline-size: var(--env-color-swatch-size);
    block-size: var(--env-color-swatch-size);
    border-radius: var(--env-radius-xs);
    background-color: var(--env-color-swatch-color);
    box-shadow: inset 0 0 0 var(--env-control-border-width) var(--env-color-border-muted);
  }
  .env-color-swatch-sample[data-translucent] {
    background:
      linear-gradient(var(--env-color-swatch-color), var(--env-color-swatch-color)),
      repeating-conic-gradient(var(--env-color-bg-neutral-muted) 0 25%, transparent 0 50%) 0 0 /
        var(--env-color-swatch-checker) var(--env-color-swatch-checker);
  }
  .env-color-swatch-value {
    font-variant-numeric: tabular-nums;
  }
  .env-color-swatch-label + .env-color-swatch-value {
    color: var(--env-color-fg-muted);
  }
  .env-icon > .env-color-swatch {
    display: block;
    --env-color-swatch-size: 100%;
  }
  .env-icon-button:where([data-variant='secondary']:has(> .env-icon > .env-color-swatch)) {
    border-radius: var(--env-radius-sm);
    background: var(--env-button-custom-fill, transparent);
  }
  .env-icon-button:where([data-variant='secondary']:has(> .env-icon > .env-color-swatch)):is(
      :hover,
      :focus-visible,
      [aria-expanded='true']
    ):not(:disabled):not([aria-disabled='true']) {
    background: var(--env-button-custom-fill, var(--env-color-bg-neutral-subtle-hover));
  }
  .env-icon-button:where(
      [data-variant='secondary']:has(> .env-icon > .env-color-swatch)
    ):active:not(:disabled):not([aria-disabled='true']) {
    background: var(--env-button-custom-fill, var(--env-color-bg-neutral-subtle-pressed));
  }
  @media (forced-colors: active) {
    .env-color-swatch-sample {
      forced-color-adjust: none;
    }
  }
}