$filter-color-size: 18px !default;
$filter-color-multi: url('/static/images/color-multi.jpg') !default;
$filter-color-border-radius: null !default;

.filter-param-color {
   display: inline-flex;
   margin-right: 2px;
   margin-bottom: 2px;

   input {
      opacity: 0;
      position: absolute;
      z-index: -1;

      &:checked ~ span::after {
         @include fonticon;

         content: $icons_check;
         color: $white;
         display: block;
         line-height: $filter-color-size;
         position: absolute;
         left: 0;
         text-align: center;
         text-shadow: #191919 0 0 2px;
         width: 100%;
      }
   }

   span {
      background: $filter-color-multi;
      background-size: cover;
      border-radius: $filter-color-border-radius;
      display: block;
      position: relative;
      width: $filter-color-size;
      height: $filter-color-size;
   }

   &:hover {
      cursor: pointer;
   }

   [style="background: #ffffff;"] {
      outline: 1px solid $border-color;
      outline-offset: -1px;
   }
}
