$checkbox-dimension: 20px;
$checkbox-border-width: 1px;
$checkbox-icon-dimension: 8px;
$checkbox-label-left-margin: 11px;
$checkbox-error-top-margin: 10px;
$color-disabled-inverted: #4d9ba6; // The designer has given approval for this color only for component's background "blue-teal".

axa-checkbox {
  @mixin show-checkmark($color: currentColor) {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 18px;
    color: $color;
  }
  
  @include text(t4);
  display: block;

  .a-checkbox__wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;

    &:focus {
      outline: 1px solid $color-axa-blue;
    }
  }

  &[disabled] .a-checkbox__wrapper {
    cursor: default;
  }

  .a-checkbox__input {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0, 0, 0, 0);
    margin: -1px;
    overflow: hidden;
  }

  .a-checkbox__input.a-checkbox__input {
    &:checked + .a-checkbox__icon {
      &::after {
        border-color: $color-axa-blue;
        background-color: $color-axa-blue;
      }

      &--inverted::after {
        border-color: $color-axa-blue; // just needed for yet unsupportet variant "inverted-square"
        background-color: $color-axa-blue; // just needed for yet unsupportet variant "inverted-square"
      }
    }

    &:checked + .a-checkbox__icon--checkmark {
      border-color: $color-axa-blue;
      background-color: $color-axa-blue;
      .a-checkbox__icon-checkmark {
        @include show-checkmark($color-prim-white);
      }
    }

    &:checked + .a-checkbox__icon--inverted {
      border-color: $color-prim-white;
      background-color: $color-prim-white;
      .a-checkbox__icon-checkmark {
        @include show-checkmark($color-axa-blue);
      }
    }

    &:disabled + .a-checkbox__icon {
      cursor: default;
      border-color: $color-silver;
      &::after {
        border-color: transparent;
      }
    }

    &:disabled + .a-checkbox__icon--checkmark {
      background-color: $color-prim-white;
      .a-checkbox__icon-checkmark {
        color: $color-silver;
      }
    }

    &:disabled + .a-checkbox__icon--inverted {
      background-color: transparent;
      border-color: $color-disabled-inverted;
      .a-checkbox__icon-checkmark {
        color: $color-disabled-inverted;
      }
    }
  }

  .a-checkbox__icon {
    display: block;
    position: relative;
    transition: all 0.2s ease;
    width: $checkbox-dimension;
    height: $checkbox-dimension;
    border: $checkbox-border-width solid;
    border-color: $color-light-grey;
    box-sizing: border-box;

    &-checkmark {
      display: none;
    }

    &--inverted {
      border-color: $color-prim-white;
    }

    &:not(.a-checkbox__icon--checkmark) {
      &::after {
        content: '';
        display: block;
        position: absolute;
        top: ($checkbox-dimension - $checkbox-icon-dimension - 2 * $checkbox-border-width) * 0.5;
        left: ($checkbox-dimension - $checkbox-icon-dimension - 2 * $checkbox-border-width) * 0.5;
        width: $checkbox-icon-dimension;
        height: $checkbox-icon-dimension;
        border: 1px solid;
        border-color: transparent;
        box-sizing: border-box;
      }
    }
  }

  .a-checkbox__content {
    display: block;
    margin: -19px 0 0 30px;
    line-height: 1.37;
    color: $color-dark-grey;
    &--inverted {
      color: $color-prim-white;
    }
  }

  .a-checkbox__error {
    display: block;
    margin: $checkbox-error-top-margin 0 0 0;
    line-height: 1.37;
  }

  &[label]:not([label=""]) { // if label is set and is not empty the error text should have some margin-left
    .a-checkbox__error {
      margin: $checkbox-error-top-margin 0 0 ($checkbox-dimension + $checkbox-label-left-margin);
    }
  }

  &[disabled] {
    .a-checkbox__content {
      color: $color-light-grey;
      &--inverted {
        color: $color-disabled-inverted;
      }
    }
    .a-checkbox__input:checked + .a-checkbox__icon::after {
      border-color: $color-silver;
      background-color: $color-silver;
    }
  }

  &[error] {
    color: $color-shy-tomato;
    &:not([checked]) .a-checkbox__icon {
      border-color: $color-shy-tomato;
    }
  }

  &[styled] .a-checkbox__content *,
  .a-checkbox__children-inline,
  .a-checkbox__children-inline * {
      display: inline;
      @include text(t4);
      line-height: 1;

      @media (min-width: $breakpoint-sm) {
         @include text(t3);
         line-height: 1;
      }
      
  }

  &:hover[data-axa-checkbox-no-touch] {
    &:not([disabled]) {
      .a-checkbox__icon {
        border-color: $color-axa-blue;
        
        &--inverted {
          border-color: $color-prim-white;
        }
      }
    }
  }
}
