$checkbox-size: 1.25em;
$checkbox-padding: .25em;
$checkbox-border-width: 1px;
$checkbox-border-radius: 2px;
$checkbox-width: .125em;

.bz-checkbox-list {
  display: flex;
  flex-direction: column;

  &--horizontal {
    flex-direction: row;
  }
}

.bz-checkbox {
  display: inline;
  padding: $bz-space-inset-s 0;
  position: relative;

  &__label {
    clear: both;
    cursor: pointer;
    line-height: $checkbox-size;
    padding-left: 1.75em;
    position: relative;
    vertical-align: top;
    width: 100%;
    display: inline-flex;

    &:before, &:after {
      content: "";
      left: 0;
      position: absolute;
      top: 0;
    }

    &:before {
      background-color: $bz-neutral-100;
      border: $checkbox-border-width solid $bz-neutral-400;
      border-radius: $checkbox-border-radius;
      cursor: pointer;
      height: $checkbox-size;
      transition: background .3s;
      width: $checkbox-size;
    }

    &--compact {
      font-size: $bz-font-size-body-small;
    }
  }

  &__input {
    &:checked {
      + .bz-checkbox__label:before {
        background-color: $bz-theme-400;
        border-color: $bz-theme-400;
      }

      + .bz-checkbox__label.bz-checkbox__label--reversed:before {
        background-color: $bz-neutral-100;
      }

      + .bz-checkbox__label:after {

        $check-size: $checkbox-size - 2 * $checkbox-padding;

        border: $checkbox-width solid $bz-neutral-100;
        border-right-style: none;
        border-top-style: none;
        height: $check-size / 2;
        transform: translate($checkbox-padding, ($checkbox-size / 2) - ($check-size / 2.6)) rotate(-45deg);
        width: $check-size;
      }

      + .bz-checkbox__label.bz-checkbox__label--reversed:after {
        border: $checkbox-width solid $bz-theme-400;
        border-right-style: none;
        border-top-style: none;
      }

    }

    &:disabled {
      + .bz-checkbox__label {
        color: $bz-neutral-500;
        cursor: not-allowed;
      }

      + .bz-checkbox__label:before {
        background-color: $bz-neutral-200;
        border-color: $bz-neutral-300;
      }

      &:checked {
        + .bz-checkbox__label:before {
          background-color: $bz-neutral-200;
          border-color: $bz-neutral-300;
        }

        + .bz-checkbox__label:after {
          border-color: $bz-neutral-300;
        }
      }
    }
    &.cdk-keyboard-focused:focus + .bz-checkbox__label:before{
      outline: 0!important;
      box-shadow: 0 0 0 2px rgba(51,191,193,.5),0 0 0 4px rgba(51,191,193,.25);
    }

  }

  .bz-checkbox__state {
    background: transparent;
    border-radius: 50%;
    height: 2em;
    left: -0.38em;
    opacity: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0.3);
    transition: all 0.5s, opacity 0.2s 0.5s;
    width: 2em;

    &--focus {
      background: $bz-neutral-300;
      opacity: 0;
      transform: translateY(-50%) scale(1);
    }
  }
}

[dir=rtl] {
  .bz-checkbox {
    &__label {
      padding-left: 0;
      padding-right: 1.75em;

      &:before,
      &:after {
        left: auto;
        right: 0;
      }

      &:after {
        left: auto;
        right: 0.5em;
      }
    }

    .bz-checkbox__state--focus {
      left: auto;
      right: -.38em;
      transform: translateY(-47%) scale(1);
    }
  }

}

.bz-yes-no {
  &.bz-checkbox {
    display: flex;
  }

  .bz-checkbox {
    &__label {
      padding-right: 0;
      padding-left: $checkbox-size;
    }
  }
}

//#region Tablet - Portrait and Landscape
@media only screen and (min-width: 768px) {
  .bz-checkbox {
    &__input {
      &:hover {
        + .bz-checkbox__label:before {
          border-color: $bz-theme-400;
        }
      }

      &:checked:hover {
        + .bz-checkbox__label:before {
          border-color: $bz-theme-400;
        }

        + .bz-checkbox__label:after {
          border-right-style: none;
          border-top-style: none;
        }
      }

      &:disabled {
        &:hover {
          + .bz-checkbox__label:before {
            border-color: $bz-neutral-300;
          }

          + .bz-checkbox__label:after {
            display: none;
          }

          &:checked {
            + .bz-checkbox__label:after {
              display: block;
            }
          }
        }
      }
    }
  }
}
//#endregion

//#region Smartphone - Portrait and Landscape
@media only screen and (max-width: 768px) {
  .bz-checkbox-list--horizontal {
    .bz-checkbox {
      width: 50%;
    }
  }
}
//#endregion

@media only screen and (min-width: 769px) {
  .bz-checkbox-list--horizontal {
    .bz-checkbox {
      width: 33%;
    }
  }
}