---

@use '../../../theme/mixins' as m;

$color-option-size: 32px;
$color-option-gap: 8px;

.colorPicker {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-1000);
}

.colorPalette {
  display: grid;
  grid-template-columns: repeat(10, $color-option-size);
  gap: $color-option-gap;
}

.colorOption {
  @include m.buttonBase;

  --color-option: transparent;

  width: $color-option-size;
  min-width: $color-option-size;
  height: $color-option-size;
  padding: 0;
  border: 0;
  border-radius: var(--space-0250);
  background-color: var(--color-option);
  cursor: pointer;

  p {
    display: none;
  }

  &:hover:not(:disabled):not(.selected),
  &:active:not(:disabled):not(.selected) {
    background-color: var(--color-option);
    box-shadow: 0 0 0 2px var(--neutral-8);
  }

  &.selected {
    background-color: var(--color-option);
    box-shadow:
      0 0 0 2px var(--neutral-2),
      0 0 0 4px var(--blue-1);
  }
}

.colorDivider {
  width: 100%;
  height: 1px;
  background-color: var(--color-field-border);
}









@use '../../../theme/mixins' as m;

$color-menu-width: 424px;

.colorField {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1000);
}

.colorFieldLabel {
  color: var(--neutral-12);
  font-size: var(--space-0875);
}

.colorTrigger {
  @include m.buttonBase;

  min-width: 44px;
  height: 40px;
  justify-content: center;
  padding: var(--space-0250);
  border: 1px solid var(--color-field-border);
  border-radius: var(--space-0250);
  background-color: transparent;

  p {
    width: 100%;
    justify-content: center;
    padding: 0;
  }

  &:hover:not(:disabled):not(.pressed),
  &:active:not(:disabled):not(.pressed) {
    border-color: var(--blue-1);
  }

  &.pressed {
    border-color: var(--blue-1);
  }
}

.colorPreview {
  position: relative;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--color-field-border);
  border-radius: var(--space-0125);
  background:
    linear-gradient(45deg, var(--color-field-square) 25%, transparent 25%),
    linear-gradient(-45deg, var(--color-field-square) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--color-field-square) 75%),
    linear-gradient(-45deg, transparent 75%, var(--color-field-square) 75%);
  background-size: var(--space-0500) var(--space-0500);
  background-position:
    0 0,
    0 calc(var(--space-0500) / 2),
    calc(var(--space-0500) / 2) calc(var(--space-0500) / -2),
    calc(var(--space-0500) / -2) 0;
}

.colorPreviewFill {
  position: absolute;
  inset: 0;
}

.colorMenu {
  --dropdown-width: #{$color-menu-width};

  box-sizing: border-box;
  padding: var(--space-1000);
}