.container {
  --checkbox-tick-color: var(--ui-white);
  line-height: 0;
  padding: calc(var(--space) / 2) 0;
}

/* Size */
.small {
  --checkbox-size: 20px;
  --checkbox-border-width: 1.5px;
  --checkbox-border-raduis: var(--border-radius);
  --checkbox-outline-width: 2px;
}

.normal {
  --checkbox-size: 26px;
  --checkbox-border-width: 2px;
  --checkbox-border-raduis: var(--border-radius);
  --checkbox-outline-width: 3px;
}

.large {
  --checkbox-size: 32px;
  --checkbox-border-width: 2px;
  --checkbox-border-raduis: var(--border-radius-large);
  --checkbox-outline-width: 3px;
}

/* Intents */
.default {
  --checkbox-color: var(--ui-grey-50);
  --checkbox-outline-color: color-mod(var(--ui-grey-50) alpha(30%));
}

.primary {
  --checkbox-color: var(--color-primary);
  --checkbox-outline-color: color-mod(var(--color-primary) alpha(30%));
}

.info {
  --checkbox-color: var(--color-info);
  --checkbox-outline-color: color-mod(var(--color-info) alpha(30%));
}

.success {
  --checkbox-color: var(--color-success);
  --checkbox-outline-color: color-mod(var(--color-success) alpha(30%));
}

.danger {
  --checkbox-color: var(--color-danger);
  --checkbox-outline-color: color-mod(var(--color-danger) alpha(30%));
}

.warning {
  --checkbox-color: var(--color-warning);
  --checkbox-outline-color: color-mod(var(--color-warning) alpha(30%));
}

.input {
  position: absolute;
  left: -9999px;
  opacity: 0;

  /* Checked */
  &:checked + .checkbox {
    background-color: var(--checkbox-color);
    & .tick {
      stroke-dashoffset: 0;
    }
  }

  /* Disabled */
  &:disabled + .checkbox,
  &:disabled + .checkbox + .labelText {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* Focus */
  &:focus + .checkbox,
  &:active + .checkbox {
    box-shadow: 0 0 0 var(--checkbox-outline-width)
      var(--checkbox-outline-color);
  }
}

.fill {
  & .label,
  & .labelText {
    width: 100%;
  }
}

.right {
  & .label {
    flex-direction: row-reverse;
  }

  & .labelText {
    padding-right: var(--space);
    padding-left: 0;
  }
}

.round {
  & .checkbox {
    border-radius: 100%;
  }
  & .tick {
    transition: stroke-dashoffset var(--transition-duration)
      var(--transition-duration) ease;
  }
}

.checkbox {
  flex: 0 0 auto;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  border-radius: var(--checkbox-border-raduis);
  box-sizing: border-box;
  border: var(--checkbox-border-width) solid var(--checkbox-color);
  transition: box-shadow var(--button-transition-duration) ease,
    background var(--button-transition-duration) ease;
}

.tick {
  color: var(--checkbox-tick-color);
  stroke: currentColor;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset var(--transition-duration) ease;
}

.label {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.labelText {
  padding-left: var(--space);
}

.outline {
  --checkbox-tick-color: var(--checkbox-color);

  & .input {
    &:checked + .checkbox {
      background: transparent;
    }
  }
  & .tick {
    color: var(--checkbox-tick-color);
  }
}