:host {
  display: inline-flex;
}

.grit-checkbox {
  display: inline-block;
  position: relative;
}

.grit-checkbox-flex-parent {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.grit-checkbox * {
  box-sizing: border-box;
  transition: all var(--grit-checkbox-transition-curve-duration) var(--grit-checkbox-transition-curve-check);
}

.checkbox {
  --background: var(--grit-checkbox-check-color);
  --border: var(--grit-checkbox-border-color);
  --border-active: var(--grit-checkbox-border-color);
  --border-disable: var(--grit-checkbox-disabled-border-color);
  --border-error: var(--grit-checkbox-error-border-color);
  --tick: var(--grit-checkbox-check-color);
  position: relative;
  align-self: flex-start;
}
.checkbox input,
.checkbox svg {
  width: 16px;
  height: 16px;
  display: flex;
}
.checkbox input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  background: var(--background);
  border: none;
  min-height: 16px;
  min-width: 16px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 2px;
  transition: box-shadow 0.3s;
  box-shadow: inset 0 0 0 var(--full-shadow, 1px) var(--border-color, var(--border));
}
.checkbox input:checked + svg polyline {
  display: block;
}
.checkbox input:checked + svg line {
  display: none;
}
.checkbox input:checked:disabled {
  background: var(--grit-checkbox-disabled-background-color);
  pointer-events: none !important;
}
.checkbox input:indeterminate + svg line {
  display: block;
}
.checkbox input:indeterminate + svg polyline {
  display: none;
}
.checkbox input:hover {
  background: var(--grit-checkbox-control-hover-background);
  transition: all var(--grit-checkbox-transition-curve-duration) var(--grit-checkbox-transition-curve-check);
}
.checkbox input:focus {
  background: var(--grit-checkbox-control-hover-background);
}
.checkbox input:disabled {
  --border-color: var(--border-disable);
  background: var(--grit-checkbox-check-color);
  pointer-events: none !important;
}
.checkbox input.error {
  background-color: rgba(216, 8, 0, 0.3);
  --border-color: var(--border-error);
}
.checkbox svg {
  pointer-events: none;
  fill: none;
  stroke-width: 1.13px;
  stroke-linecap: square;
  stroke-linejoin: square;
  stroke: var(--stroke, var(--border-active));
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  transform: scale(1, 0) translateZ(0);
}
.checkbox svg line {
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.checkbox.animation {
  --stroke: var(--grit-checkbox-check-color);
}
.checkbox.animation input:checked {
  --full-shadow: 11px;
}
.checkbox.animation input:checked + svg {
  -webkit-animation: show 0.3s linear forwards;
          animation: show 0.3s linear forwards;
}
.checkbox.animation input:indeterminate {
  --full-shadow: 11px;
}
.checkbox.animation input:indeterminate + svg {
  -webkit-animation: showIndeterminate 0.3s linear forwards;
          animation: showIndeterminate 0.3s linear forwards;
}

.grit-checkbox .grit-checkbox-control-wrapper.align-right {
  flex-direction: row;
}
.grit-checkbox .grit-checkbox-control-wrapper.align-right .grit-checkbox-label {
  padding-left: 8px;
}
.grit-checkbox .grit-checkbox-control-wrapper.align-left {
  flex-direction: row-reverse;
}
.grit-checkbox .grit-checkbox-control-wrapper.align-left .grit-checkbox-label {
  padding-right: 8px;
}

.grit-checkbox .grit-checkbox-control-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

label.grit-checkbox-label {
  font-family: var(--grit-checkbox-label-font-family);
  color: var(--grit-checkbox-label-color);
  cursor: pointer;
  font-size: var(--grit-font-size-0);
}

label.grit-checkbox-label.disabled {
  pointer-events: none;
}

.grit-checkbox .grit-checkbox-control-wrapper .grit-checkbox-custom.disabled {
  border: 1px solid var(--neutral500);
}

span.grit-checkbox-label.disabled {
  color: var(--neutral500);
}

@-webkit-keyframes showIndeterminate {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes showIndeterminate {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes show {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes show {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes hide {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes hide {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(0);
  }
}
@media (hover: none) {
  input:hover {
    background: none !important;
  }
}