/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
.ColorPicker {
  /* Set color on root of component. It can be overridden after the @include */
  color: var(--colorsTextDefault, #141414);
  /* Make sure font-family goes across entire component */
  font-family: "Nunito Sans", sans-serif;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: -8px;
  outline: none;
}

.ColorPicker__Item {
  display: block;
  width: 24px;
  height: 24px;
  cursor: pointer;
  margin: 8px;
  border: 2px solid transparent;
  border-radius: 3px;
  box-sizing: border-box;
  /* smartphones, touchscreens */
}
.ColorPicker__Item--active {
  box-shadow: 0 0 0 2px var(--colorsBorderPrimary, #0265dc);
  border-color: var(--colorsSurfaceDefault, white);
  cursor: default;
}
.ColorPicker__Item:focus, .ColorPicker__Item:focus-visible {
  outline: none;
}
.ColorPicker:not(.ColorPicker--disabled) .ColorPicker__Item:focus {
  box-shadow: 0 0 0 2px var(--colorsBorderPrimary, #0265dc), 0 0 0 5px var(--colorsFocusRingPrimary, #a9d1ff);
}
@media (pointer: coarse) {
  .ColorPicker__Item {
    width: 32px;
    height: 32px;
  }
}

.ColorPicker--disabled {
  opacity: 0.6;
}
.ColorPicker--disabled .ColorPicker__Item {
  cursor: not-allowed;
}
.ColorPicker--disabled .ColorPicker__Item--active {
  box-shadow: 0 0 0 2px var(--colorsBorderGreyStrong, #bcbcbd);
}

.ColorPicker__CardWrapper .ColorPicker__CardSection {
  padding: 12px 20px;
}
.ColorPicker__CardWrapper--focus .ColorPicker {
  outline: none;
}
.ColorPicker__CardWrapper--disabled .ColorPicker--disabled {
  opacity: initial;
}

/*# sourceMappingURL=index.css.map */