:root {
  --visage-color-swatch-width: 16px;
  --visage-color-swatch-height: var(--visage-color-swatch-width);
  --visage-color-swatch-margin: 8px;
  --visage-color-swatch-border-width: 1px;
  --visage-color-swatch-border-color: var(--visage-color-border);
  --visage-color-swatch-border-color-checked: var(--visage-color-selected);
  --visage-color-swatch-selected-gutter: 6px;
  --visage-color-swatch-inner-gutter: 0;
  --visage-color-swatch-width-super: 36px;
  --visage-color-swatch-margin-super: 12px;
  --visage-color-swatch-height-super: var(--visage-color-swatch-width-super);
  --visage-color-swatch-selected-gutter-super: 1px;
  --visage-color-swatch-inner-gutter-super: 0
}
.color-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: calc( var(--visage-color-swatch-margin) * -1 )
}
.color-swatch {
  position: relative;
  display: inline-block;
  width: var(--visage-color-swatch-width);
  height: var(--visage-color-swatch-height);
  margin: var(--visage-color-swatch-margin);
  padding: var(--visage-color-swatch-inner-gutter);
  color: transparent;
  background-image: linear-gradient(-225deg, currentColor, currentColor 49%, transparent 50%);
  border-width: var(--visage-color-swatch-border-width);
  border-style: solid;
  border-color: var(--visage-color-swatch-border-color);
  border-radius: var(--visage-color-swatch-border-radius, 50%)
}
.color-swatch.color-swatch-disabled {
  cursor: default
}
.color-swatch.color-swatch-disabled::after,
.color-swatch.color-swatch-disabled::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 100%;
  border-bottom: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0, 17, 26, 0.5);
  opacity: .7;
  transform: translateY(-1px) rotate(45deg)
}
.color-swatch.color-swatch-disabled::after {
  transform: translateY(-1px) rotate(-45deg)
}
.color-swatches-super .color-swatch {
  width: var(--visage-color-swatch-width-super);
  height: var(--visage-color-swatch-height-super);
  padding: var(--visage-color-swatch-inner-gutter-super, var(--visage-color-swatch-inner-gutter));
  margin: var(--visage-color-swatch-margin-super)
}
.color-swatches-more {
  display: inline-block;
  margin: 0 0 4px 8px;
  font-size: var(--visage-text-size-6)
}
.color-swatches-super .color-swatches-more {
  margin-bottom: 24px
}
.selection-set .color-swatches .selection-set-label,
.selection-set.color-swatches .selection-set-label {
  padding: 0;
  margin: 0 calc( var(--visage-color-swatch-margin) - var(--visage-color-swatch-selected-gutter)) 2px 0;
  border: 1px solid transparent;
  border-radius: 50%
}
.selection-set .color-swatches .selection-set-label .color-swatch,
.selection-set.color-swatches .selection-set-label .color-swatch {
  margin: var(--visage-color-swatch-selected-gutter)
}
.selection-set .color-swatches.color-swatches-super .selection-set-label,
.selection-set.color-swatches.color-swatches-super .selection-set-label {
  margin: 0 calc( var(--visage-color-swatch-margin-super) - var(--visage-color-swatch-selected-gutter-super)) 20px 0
}
.selection-set .color-swatches.color-swatches-super .selection-set-label .color-swatch,
.selection-set.color-swatches.color-swatches-super .selection-set-label .color-swatch {
  margin: var(--visage-color-swatch-selected-gutter-super)
}
.selection-set .color-swatches input:checked + .selection-set-label,
.selection-set.color-swatches input:checked + .selection-set-label {
  box-shadow: none;
  border-color: #000
}
.selection-set .color-swatches input:focus + .selection-set-label,
.selection-set.color-swatches input:focus + .selection-set-label {
  filter: drop-shadow(0 0 1px #000)
}
.selection-set .color-swatches input:focus + .selection-set-label .color-swatch,
.selection-set.color-swatches input:focus + .selection-set-label .color-swatch {
  border-color: transparent
}
.selection-set .color-swatches input:disabled + .selection-set-label,
.selection-set.color-swatches input:disabled + .selection-set-label {
  background: none;
  border-color: transparent
}
.selection-set .color-swatches input:disabled + .selection-set-label .color-swatch,
.selection-set.color-swatches input:disabled + .selection-set-label .color-swatch {
  cursor: default
}
.selection-set .color-swatches input:disabled + .selection-set-label .color-swatch::after,
.selection-set .color-swatches input:disabled + .selection-set-label .color-swatch::before,
.selection-set.color-swatches input:disabled + .selection-set-label .color-swatch::after,
.selection-set.color-swatches input:disabled + .selection-set-label .color-swatch::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 100%;
  border-bottom: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0, 17, 26, 0.5);
  opacity: .7;
  transform: translateY(-1px) rotate(45deg)
}
.selection-set .color-swatches input:disabled + .selection-set-label .color-swatch::after,
.selection-set.color-swatches input:disabled + .selection-set-label .color-swatch::after {
  transform: translateY(-1px) rotate(-45deg)
}
.selection-set .color-swatches input:disabled:active + .selection-set-label,
.selection-set .color-swatches input:disabled:checked + .selection-set-label,
.selection-set.color-swatches input:disabled:active + .selection-set-label,
.selection-set.color-swatches input:disabled:checked + .selection-set-label {
  border-color: var(--visage-color-error)
}