@import '../settings/variables';
@import '../tools/mixins/position';

.c-checkbox {
  display: inline-block;
  position: relative;
  padding-left: 1.875em;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.375em;

  &__native {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }

  &__ui {
    @include absolute(0.0625em, auto, auto, 0);
    height: 1.25em;
    width: 1.25em;
    border-radius: 0.25em;
    box-sizing: border-box;
    border: $hairline solid $color-shadow;
  }

  &:hover &__native ~ &__ui, &__native:focus ~ &__ui {
    background-color: $color-primary-dark;
    border-color: $color-primary-dark;
  }

  &__native:checked ~ &__ui {
    background-color: $color-primary;
    border: none;
  }

  &:hover &__native:not([disabled]):checked ~ &__ui,
  &__native:checked:focus ~ &__ui {
    background: $color-primary-dark;
  }

  & &__native:disabled ~ &__ui {
    background: $color-separator;
    border: none;
    pointer-events: none;
  }

  &__ui:after {
    @include absolute(0.25em, auto, auto, 0.5em);
    content: '';
    display: none;
    width: 0.3125em;
    height: 0.625em;
    border: $hairline solid $color-background;
    border-width: 0 0.125em 0.125em 0;
    transform: rotate(45deg);
  }

  &__native:checked ~ &__ui:after {
    display: block;
  }

  &__native:disabled ~ &__ui:after {
    border-color: $color-labels;
  }
}