// scss-lint:disable SelectorDepth QualifyingElement

:root {
  --sci-checkbox-size: 16px;
}

input[type="checkbox"].sci-checkbox {
  cursor: pointer;
  flex-shrink: 0;
  height: var(--sci-checkbox-size);
  margin: 0;
  opacity: 0;
  position: relative;
  width: var(--sci-checkbox-size);
  z-index: 2;

  + .sci-checkbox-label {
    display: inline-block;
    flex-shrink: 0;
    height: var(--sci-checkbox-size);
    margin-left: calc(var(--sci-checkbox-size) * -1);
    position: absolute;
    width: var(--sci-checkbox-size);

    &::before {
      @include font-awesome;
      animation-timing-function: $timing-function-sharp;
      background: $color-white;
      border: $border-default;
      border-radius: 1px;
      color: $color-white;
      content: "";
      font-size: calc(var(--sci-checkbox-size) - var(--sci-checkbox-size) * .375);
      height: var(--sci-checkbox-size);
      left: 0;
      line-height: calc(var(--sci-checkbox-size) - 2px);
      position: absolute;
      text-align: center;
      top: 1px;
      transition: .2s;
      width: var(--sci-checkbox-size);
    }
  }

  &.hidden + .sci-checkbox-label {
    display: none;
  }

  &:checked + .sci-checkbox-label {
    &::before {
      background: $brand-primary;
      border: 1px solid $brand-primary;
      content: $font-fas-check;
    }
  }

  &:disabled + .sci-checkbox-label {
    &::before {
      background: $color-alto;
      border: $border-tertiary;
    }
  }
}