@use "../../../../theme/_ontimeColours" as *;
@use "../../../../theme/_v2Styles" as *;

.swatch {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  border: 1px solid white;
  box-shadow: 0 0 0 1px $gray-300;
  cursor: pointer;

  transition-property: box-shadow;
  transition-duration: $transition-time-action;
}

.swatch:hover {
  box-shadow: 0 0 0 1px $blue-300;
}