.gc-checkbox {
  @apply appearance-none w-4 h-4 rounded-small border border-solid border-neutral-80 cursor-pointer bg-white relative shadow-inner;
}
.gc-checkbox:hover {
  @apply border-blue-primary;
}
.gc-checkbox:focus {
  @apply shadow-blue-focus-sm border-blue-primary;
}
.gc-checkbox:focus:before {
  @apply absolute w-4 h-4 border border-solid border-white rounded-small;
  content: '';
  border-radius: 5px;
  top: -2px;
  left: -2px;
}

.gc-checkbox:checked {
  @apply border-blue-primary bg-blue-primary;
}
.gc-checkbox:checked:hover {
  @apply bg-blue-60;
}
.gc-checkbox:checked:after {
  @apply border-2 border-solid border-t-0 border-r-0 border-white absolute;
  width: 8px;
  height: 5px;
  transform: rotate(-50deg);
  top: 2px;
  left: 2px;
  content: '';
}

.gc-checkbox-error {
  @apply border-red-primary;
}
.gc-checkbox-error:checked {
  @apply bg-red-primary border-red-primary;
}
.gc-checkbox-error:checked:hover {
  @apply bg-red-60;
}

.gc-checkbox-error:disabled,
.gc-checkbox:disabled {
  @apply cursor-default bg-neutral-95;
}
.gc-checkbox-error:disabled:hover,
.gc-checkbox:disabled:hover,
.gc-checkbox-error:disabled:focus,
.gc-checkbox:disabled:focus {
  @apply border-neutral-80 shadow-inner;
}
.gc-checkbox-error:disabled:checked,
.gc-checkbox:disabled:checked {
  @apply border-neutral-80 bg-neutral-95;
}
.gc-checkbox-error:disabled:checked:after,
.gc-checkbox:disabled:checked:after {
  @apply border-neutral-primary;
}
