/**
 * @file
 * Checkbox and radio input elements.
 */

input[type="checkbox"] {
  --chkbg: 215 28% 17%;
  --chkfg: 0 0% 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--white);
  border-radius: var(--radius-2);
  border-width: 1px;
  cursor: pointer;
  display: inline-block;
  flex-shrink: 0;
  height: var(--size-6);
  -webkit-margin-end: var(--size-2);
  margin-inline-end: var(--size-2);
  vertical-align: text-bottom;
  width: var(--size-6);
}

input[type="checkbox"]:checked,
input[type="checkbox"][checked="true"],
input[type="checkbox"][aria-checked="true"] {
  animation: checkmark 0.2s ease-in-out;
  background-color: var(--gray-900);
  background-image: linear-gradient(
      -45deg,
      transparent 65%,
      hsl(var(--chkbg)) 66%
    ),
    linear-gradient(45deg, transparent 75%, hsl(var(--chkbg)) 76%),
    linear-gradient(-45deg, hsl(var(--chkbg)) 40%, transparent 41%),
    linear-gradient(
      45deg,
      hsl(var(--chkbg)) 30%,
      hsl(var(--chkfg)) 31%,
      hsl(var(--chkfg)) 40%,
      transparent 41%
    ),
    linear-gradient(-45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 51%);
  background-repeat: no-repeat;
}

input[type="checkbox"]:focus {
  outline: 2px solid var(--gray-300);
  outline-offset: 2px;
}

input[type="checkbox"] + label {
  display: inline-block;
  -webkit-padding-start: var(--size-2);
  padding-inline-start: var(--size-2);
}

@keyframes checkmark {
  0% {
    background-position-y: 5px;
  }

  50% {
    background-position-y: -2px;
  }

  100% {
    background-position-y: 0;
  }
}

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--white);
  border-radius: var(--radius-round);
  border-width: 1px;
  color: currentcolor;
  display: grid;
  font: inherit;
  height: var(--size-6);
  margin: 0;
  align-content: center;
  justify-content: center;
  place-content: center;
  transform: translateY(-0.075em);
  width: var(--size-6);
}

input[type="radio"]::before {
  border-radius: var(--radius-round);
  box-shadow: inset 1em 1em var(--black);
  content: "";
  height: var(--size-4);
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  width: var(--size-4);
}

input[type="radio"]:checked::before {
  transform: scale(1);
}

input[type="radio"]:focus {
  outline: 2px solid var(--gray-300);
  outline-offset: 2px;
}

input[type="radio"] + label {
  display: inline-block;
  -webkit-padding-start: var(--size-2);
  padding-inline-start: var(--size-2);
}