.form-check span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  background-color: transparent;
  border: 1px solid var(--secondary);
  border-radius: 50%;
  opacity: 0.2;
  transform: translate(-50%, -50%) scale(0);
  z-index: -1;
  transition-duration: 0.5s;
}
.dark .form-check span::after {
  border: 1px solid var(--color-white);
}

.form-check .form-check-input:checked + span::after {
  transform: translate(-50%, -50%) scale(1);
}

.dark .product-size .btn-check:checked + label {
  color: var(--secondary) !important;
  background: #fff;
}
.light .product-size .btn-check:checked + label {
  background: var(--secondary) !important;
  color: #fff;
}

.product-size.light .btn-check:checked + label {
  background: var(--color-white) !important;
  border-color: var(--color-white) !important;
  color: #000;
}

.dark .bookmark-btn .form-check-input:checked + .form-check-label {
  color: var(--color-darkbtn);
  background-color: var(--color-white);
  border-color: var(--color-white);
}
 .bookmark-btn .form-check-input:checked + .form-check-label {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.dark .bookmark-btn .form-check-input:checked + .form-check-label svg path {
  @apply stroke-secondary;
}
.bookmark-btn .form-check-input:checked + .form-check-label svg path {
  @apply stroke-white;
}

.form-check-input {
  width: 1.125em;
  height: 1.125em;
  border: 2px solid #D7D7D7;
  margin: 4px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  vertical-align: top;
  background-image: var(--tw-form-check-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 4px;
}

.form-check-input:checked[type="checkbox"] {
  --tw-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.show-pass.active::after {
  opacity: 0;
}