@import "./ColorSwatch.css";
@import "./ColorField.css";
@import "./theme.css";

.react-aria-ColorSwatchPicker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.react-aria-ColorSwatchPickerItem {
  position: relative;
  outline: none;
  border-radius: 4px;
  width: fit-content;
  forced-color-adjust: none;

  &[data-focus-visible] {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
  }

  &[data-selected]::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid black;
    outline: 2px solid white;
    outline-offset: -4px;
    border-radius: inherit;
  }

  &[data-disabled] {
    opacity: 0.2;
  }
}

.react-aria-ColorSwatchPicker {
  &[data-layout=stack] {
    flex-direction: column;
  }
}
