// checkbox input style
.product-filter-item-listing {
  --background: #fff;
  --border: #d1d6ee;
  --border-hover: #bbc1e1;
  --border-active: #1e2235;
  --tick: #fff;
  max-height: rem(370px);
  overflow-y: auto;
  .product-filter-label {
    position: relative;
    display: flex;
    cursor: pointer;
    align-items: center;
    margin: 0;

    &:not(:last-child) {
      margin-bottom: rem(20px);
    }

    .product-filter-title {
      margin-left: rem(12px);
      line-height: 1;
    }

    .product-filter-svg {
      stroke-dasharray: var(--a, 86.12);
      stroke-dashoffset: var(--o, 86.12);
      transition: stroke-dasharray 0.6s, stroke-dashoffset 0.6s;
      pointer-events: none;
      fill: none;
      stroke-width: 2px;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke: var(--stroke, var(--border-active));
      position: absolute;
      top: 0;
      left: 0;
      transform: scale(var(--scale, 1)) translateZ(0);
    }

    .product-filter-svg,
    .product-filter-input {
      width: rem(16px);
      height: rem(16px);
      display: block;
    }

    .product-filter-input {
      -moz-appearance: none;
      position: relative;
      outline: none;
      background-color: var(--background);
      cursor: pointer;
      border-radius: rem(4px);
      transition: box-shadow 0.3s;
      box-shadow: inset 0 0 0 var(--s, 1px) var(--b, var(--border));
      -webkit-appearnance: none;
      appearance: none;

      &:checked {
        + svg {
          --a: 16.1 86.12;
          --o: 102.22;
        }
        --s: 2px;
        transition-delay: 0.4s;
        --b: var(--border-active);
      }
    }

    .product-filter-radio-svg {
      width: rem(16px);
      height: rem(16px);
      fill: none;
      vertical-align: middle;

      circle {
        stroke-width: 2;
        stroke: var(--border);
      }

      path {
        &.inner {
          stroke-width: 6;
          stroke-dasharray: 19;
          stroke-dashoffset: 19;
        }

        &.outer {
          stroke-width: 2;
          stroke-dasharray: 57;
          stroke-dashoffset: 57;
        }

        stroke: #212121;
      }
    }

    .product-filter-input-radio {
      display: none;

      &:checked {
        + .product-filter-radio-svg {
          path {
            transition: all 0.4s ease;
            transition-delay: 0s;

            &.inner {
              stroke-dashoffset: 38;
              transition-delay: 0.3s;
            }

            &.outer {
              stroke-dashoffset: 0;
            }
          }
        }
      }
    }
  }

  input[type="checkbox"]:focus + label::before,
  input[type="radio"]:focus + label::before {
    outline: none;
  }
}

@keyframes checked {
  to {
    stroke-dashoffset: 0;
  }
}

// colored checked box
.inspect-filter-widget {
  &.inspect-filter-widget-resource {
    .product-filter-item-listing {
      &.type-size,
      &.type-image,
      &.type-color {
        .os-content {
          &::before,
          &::after {
            display: none;
          }
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 16px;
          label {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}