/*
File generated by XWK on Thu, 12 Nov 2026 15:21:16 +0100 - NEVER EDIT THIS FILE 
File src: files/cache/dscss/color-renderer.D1326898.scss 
Compile Time: 4ms 
*/
.vs-item > .color-choice, .variants-switch > .select2-text > .color-choice, .checkbox.with-color > .checkbox-inline > .color-choice {
  border: solid 3px #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1.2px #ccc;
  display: block;
  height: style-config('colorRenderer_colorSize', 26.5) * 1pxstyle-config('colorRenderer_borderWidth', 1.5) * 1px;
  width: style-config('colorRenderer_colorSize', 26.5) * 1pxstyle-config('colorRenderer_borderWidth', 1.5) * 1px;
  overflow: hidden;
  position: relative;
  padding-left: 0 !important; }
  .vs-item > .color-choice > span, .variants-switch > .select2-text > .color-choice > span, .checkbox.with-color > .checkbox-inline > .color-choice > span {
    align-items: center;
    background-clip: content-box;
    display: flex;
    height: style-config('colorRenderer_colorSize', 26.5) * 1px;
    width: style-config('colorRenderer_colorSize', 26.5) * 1px;
    justify-content: center;
    position: absolute; }
  .vs-item > .color-choice span.image-color, .variants-switch > .select2-text > .color-choice span.image-color, .checkbox.with-color > .checkbox-inline > .color-choice span.image-color {
    height: style-config('colorRenderer_colorSize', 26.5) * 1px - style-config('colorRenderer_imageBorderOffset', 4) * 1px;
    width: style-config('colorRenderer_colorSize', 26.5) * 1px - style-config('colorRenderer_imageBorderOffset', 4) * 1px; }
    .vs-item > .color-choice span.image-color img, .variants-switch > .select2-text > .color-choice span.image-color img, .checkbox.with-color > .checkbox-inline > .color-choice span.image-color img {
      height: style-config('colorRenderer_colorSize', 26.5) * 1px - style-config('colorRenderer_imageBorderOffset', 4) * 1px;
      width: style-config('colorRenderer_colorSize', 26.5) * 1px - style-config('colorRenderer_imageBorderOffset', 4) * 1px; }
  .vs-item > .color-choice > .color1, .variants-switch > .select2-text > .color-choice > .color1, .checkbox.with-color > .checkbox-inline > .color-choice > .color1 {
    z-index: 5; }
  .vs-item > .color-choice.with-second-color > .color1, .variants-switch > .select2-text > .color-choice.with-second-color > .color1, .checkbox.with-color > .checkbox-inline > .color-choice.with-second-color > .color1 {
    transform: rotate(45deg) translateX(-16px); }
  .vs-item > .color-choice > .multicolored, .variants-switch > .select2-text > .color-choice > .multicolored, .checkbox.with-color > .checkbox-inline > .color-choice > .multicolored {
    background: linear-gradient(135deg, blue, green, yellow, red);
    background-clip: content-box; }
  .vs-item:hover > .color-choice, .variants-switch > .select2-text:hover > .color-choice, .checkbox.with-color > .checkbox-inline:hover > .color-choice {
    box-shadow: 0 0 0 1.2px #666; }

.vs-item > .color-choice.active, .checkbox.with-color > .checkbox-inline > input:checked + .color-choice {
  box-shadow: 0 0 0 1.2px #666; }
  .vs-item > .color-choice.active:after, .checkbox.with-color > .checkbox-inline > input:checked + .color-choice:after {
    color: white;
    content: "\f00c";
    display: block;
    height: 100%;
    width: 100%;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    text-rendering: auto;
    text-shadow: 0 0 2px black;
    position: absolute;
    z-index: 6; }

.vs-item {
  margin-left: 1px; }
  .vs-item > .color-choice.active {
    cursor: default; }

.checkbox.with-color > .checkbox-inline input {
  display: none; }
  .checkbox.with-color > .checkbox-inline > .color-choice {
    display: inline-block;
    margin-left: -17px;
    margin-right: 5px;
    vertical-align: top; }

.variants-switch > .select2-text > .color-choice {
  display: inline-block;
  margin-right: 5px;
  margin-top: -2px;
  vertical-align: middle; }

.vs-overview-item > .color-choice.with-second-color > .color1 {
  transform: rotate(45deg) translateX(-8px); }

.product-configuration-step .radio.with-color.color-top span.color-choice span.image-color {
  display: flex !important;
  justify-content: center;
  height: style-config('colorRenderer_colorSize', 26.5) * 1pxpx;
  width: style-config('colorRenderer_colorSize', 26.5) * 1pxpx;
  margin-top: 0px;
  margin-left: 0px; }