@layer env.components {
  @property --env-color-picker-button-container {
    syntax: '*';
    inherits: false;
  }
  .env-color-picker {
    --env-color-picker-max-width: 18rem;
    --env-color-picker-thumb-size: 0.75rem;
    --env-color-picker-strip-thumb-size: 0.875rem;
    --env-color-picker-strip-width: 0.625rem;
    --env-color-picker-swatch-size: 1.125rem;
    --env-color-picker-checker: 0.375rem;
    --env-color-picker-checkerboard: repeating-conic-gradient(
        var(--env-color-bg-neutral-muted) 0 25%,
        transparent 0 50%
      )
      0 0 / var(--env-color-picker-checker) var(--env-color-picker-checker);
    --env-color-picker-thumb-color: white;
    --env-color-picker-thumb-ring: color-mix(in srgb, black 50%, transparent);
    --env-color-picker-intrinsic-width: 16rem;
    container: env-color-picker / inline-size;
    contain-intrinsic-inline-size: var(--env-color-picker-intrinsic-width);
    display: flex;
    flex-direction: column;
    gap: var(--env-space-2);
    min-inline-size: 0;
    max-inline-size: var(--env-color-picker-max-width);
    color: var(--env-color-fg-default);
    font: var(--env-type-body-sm);
  }
  .env-color-picker-label {
    font: var(--env-type-body-sm);
  }
  .env-color-picker-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--env-space-2);
  }
  .env-color-picker-area {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--env-radius-none);
    box-shadow: inset 0 0 0 var(--env-control-border-width) var(--env-color-border-media);
    cursor: crosshair;
  }
  .env-color-picker-thumb {
    box-sizing: border-box;
    inline-size: var(--env-color-picker-thumb-size);
    block-size: var(--env-color-picker-thumb-size);
    border: 2px solid var(--env-color-picker-thumb-color);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--env-color-picker-thumb-ring);
    cursor: grab;
  }
  .env-color-picker-thumb[data-dragging] {
    cursor: grabbing;
  }
  .env-color-picker-thumb:has(:focus-visible) {
    outline: 2px solid var(--env-color-border-focus);
    outline-offset: 1px;
  }
  .env-color-picker-sliders {
    display: flex;
    gap: var(--env-space-1);
  }
  .env-color-picker-slider {
    display: flex;
  }
  .env-color-picker-track {
    position: relative;
    inline-size: var(--env-color-picker-strip-width);
    border-radius: var(--env-radius-none);
    box-shadow: inset 0 0 0 var(--env-control-border-width) var(--env-color-border-media);
    cursor: pointer;
  }
  .env-color-picker-slider .env-color-picker-thumb {
    --env-color-picker-thumb-size: var(--env-color-picker-strip-thumb-size);
    left: 50%;
  }
  .env-color-picker-values {
    display: grid;
    grid-template-areas: 'format eye-dropper copy' 'fields fields fields';
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--env-space-1);
  }
  .env-color-picker-values:not(:has(> .env-color-picker-format)) {
    grid-template-areas: 'fields eye-dropper copy';
  }
  .env-color-picker-eye-dropper {
    grid-area: eye-dropper;
  }
  .env-color-picker-format {
    display: flex;
    grid-area: format;
    min-inline-size: 0;
    margin-inline-start: calc(var(--env-space-1) - var(--env-space-3));
  }
  .env-color-picker-copy {
    display: flex;
    grid-area: copy;
  }
  .env-color-picker-fields {
    display: grid;
    grid-area: fields;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    min-inline-size: 0;
  }
  .env-color-picker-values[data-alpha] .env-color-picker-fields {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .env-color-picker-field[data-channel='hex'] {
    grid-column: span 3;
  }
  .env-color-picker-values[data-formats='together'] {
    grid-template-areas: none;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .env-color-picker-values[data-formats='together'][data-eye-dropper] {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .env-color-picker-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
  }
  .env-color-picker-row > .env-color-picker-fields {
    grid-area: auto;
    grid-column: 1;
  }
  .env-color-picker-row > .env-color-picker-eye-dropper {
    grid-area: auto;
    grid-column: 2;
  }
  .env-color-picker-row > .env-color-picker-copy {
    grid-area: auto;
    grid-column: -2;
  }
  .env-color-picker-field {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--env-space-1);
    min-inline-size: 0;
    block-size: var(--env-control-height-sm);
    padding-inline: var(--env-space-1) 0;
    border-radius: var(--env-radius-sm);
    cursor: text;
    transition:
      background-color var(--env-motion-duration-fast) var(--env-motion-ease-enter),
      box-shadow var(--env-motion-duration-fast) var(--env-motion-ease-enter);
  }
  @media (hover: hover) {
    .env-color-picker-field:hover:not(:has(:disabled, [readonly])) {
      background: var(--env-color-bg-neutral-muted);
    }
  }
  .env-color-picker-field:focus-within {
    background: var(--env-color-bg-neutral-muted);
    box-shadow: inset 0 0 0 calc(2 * var(--env-control-border-width))
      var(--env-color-border-primary-emphasis);
  }
  .env-color-picker-field-label {
    flex-shrink: 0;
    color: var(--env-color-fg-muted);
    text-align: start;
    user-select: none;
  }
  .env-color-picker-input {
    box-sizing: border-box;
    flex: 1 1 auto;
    inline-size: 100%;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--env-color-fg-default);
    font: inherit;
    font-variant-numeric: tabular-nums;
    caret-color: var(--env-color-border-primary-emphasis);
  }
  .env-color-picker-field:has(:disabled) {
    opacity: var(--env-state-disabled-opacity);
    cursor: default;
  }
  .env-color-picker-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--env-space-2);
    padding-block-start: var(--env-space-1);
  }
  .env-color-picker-swatch {
    inline-size: var(--env-color-picker-swatch-size);
    block-size: var(--env-color-picker-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);
    cursor: pointer;
    outline: none;
  }
  .env-color-picker-swatch[data-translucent] {
    background:
      linear-gradient(var(--env-color-swatch-color), var(--env-color-swatch-color)),
      var(--env-color-picker-checkerboard);
  }
  .env-color-picker-swatch[data-selected] {
    box-shadow:
      inset 0 0 0 var(--env-control-border-width) var(--env-color-border-muted),
      0 0 0 2px var(--env-color-bg-default),
      0 0 0 3px var(--env-color-fg-default);
  }
  .env-color-picker-swatch:focus-visible {
    outline: 2px solid var(--env-color-border-focus);
    outline-offset: 4px;
  }
  .env-color-picker-swatches[aria-disabled] .env-color-picker-swatch {
    cursor: default;
  }
  .env-color-picker-description {
    color: var(--env-color-fg-muted);
  }
  .env-color-picker-error {
    color: var(--env-color-fg-danger);
  }
  .env-color-picker[data-disabled]
    :is(
      .env-color-picker-label,
      .env-color-picker-area,
      .env-color-picker-sliders,
      .env-color-picker-swatches
    ) {
    opacity: var(--env-state-disabled-opacity);
  }
  .env-color-picker:is([data-disabled], [data-readonly])
    :is(
      .env-color-picker-area,
      .env-color-picker-track,
      .env-color-picker-thumb,
      .env-color-picker-swatch
    ) {
    cursor: default;
  }
  .env-color-picker-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--env-space-2);
    block-size: var(--env-control-height);
    margin: 0;
    padding-inline: var(--env-space-2) var(--env-space-3);
    border: var(--env-control-border-width) solid var(--env-color-picker-button-border);
    border-radius: var(--env-radius-sm);
    background: var(--env-color-picker-button-container, transparent);
    color: var(--env-color-fg-default);
    font: var(--env-type-body-sm);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color var(--env-motion-duration-medium) var(--env-motion-ease-enter);
    --env-color-picker-button-border: var(--env-color-border-default);
  }
  .env-color-picker-button[data-size='sm'] {
    --env-control-height: var(--env-control-height-sm);
  }
  .env-color-picker-button[data-size='md'] {
    --env-control-height: var(--env-control-height-md);
  }
  .env-color-picker-button[data-size='lg'] {
    --env-control-height: var(--env-control-height-lg);
  }
  @media (hover: hover) {
    .env-color-picker-button:hover:not(:disabled) {
      --env-color-picker-button-border: var(--env-color-fg-muted);
    }
  }
  .env-color-picker-button[aria-expanded='true'] {
    --env-color-picker-button-border: var(--env-color-border-primary-emphasis);
  }
  .env-color-picker-button:focus-visible {
    outline: 2px solid var(--env-color-border-focus);
    outline-offset: 2px;
  }
  .env-color-picker-button:disabled {
    opacity: var(--env-state-disabled-opacity);
    cursor: default;
  }
  .env-color-picker-popover .env-color-picker {
    --env-color-picker-width: 16rem;
    inline-size: var(--env-color-picker-width);
    max-inline-size: 100%;
  }
  @media (pointer: coarse) {
    .env-color-picker {
      --env-color-picker-thumb-size: 1.25rem;
      --env-color-picker-strip-thumb-size: 1.5rem;
      --env-color-picker-strip-width: 1rem;
      --env-color-picker-swatch-size: 1.75rem;
    }
    .env-color-picker-sliders {
      gap: var(--env-space-2);
    }
    .env-color-picker-field {
      block-size: var(--env-control-height-touch);
    }
    .env-color-picker-button {
      min-block-size: var(--env-control-height-touch);
    }
  }
  @media (forced-colors: active) {
    .env-color-picker-area,
    .env-color-picker-track,
    .env-color-picker-thumb,
    .env-color-picker-swatch {
      forced-color-adjust: none;
    }
    .env-color-picker-swatch[data-selected] {
      outline: 2px solid Highlight;
      outline-offset: 2px;
    }
    .env-color-picker-field:focus-within {
      outline: 1px solid Highlight;
    }
  }
}