@import "../../scss/typo.mixins";
@import "../../scss/breakpoints.mixins";

.checkbox {
  @extend %typo-16;

  position: relative;
  display: flex;
  margin-bottom: 8px;
  flex-direction: row;
  user-select: none;
}

.checkbox__input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.checkbox__indicator {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  margin-right: 10px;
  background: $color-white;
  border: 1px solid $color-dusty-gray;

  @include media-breakpoint-up(tablet) {
    margin-top: 5px;
  }

  .checkbox__input:focus ~ &,
  .checkbox:hover .checkbox__input:not(:disabled) ~ & {
    border-color: $color-azure;
  }

  .checkbox__input:checked ~ &, // :not(:disabled) is used to give this more specifity than the :hover effect
  .checkbox__input:active:not(:disabled) ~ & {
    background: $color-azure;
    border-color: $color-azure;
  }

  .checkbox__input:checked:disabled ~ & {
    background: $color-dusty-gray;
    border-color: $color-dusty-gray;
  }
}

.checkbox__text {
  color: $color-mineshaft;

  .checkbox__input:focus ~ &,
  .checkbox:hover .checkbox__input:not(:disabled) ~ & {
    color: $color-axa-blue;
  }

  .checkbox__input:disabled ~ & {
    color: $color-dusty-gray;
  }
}