$checkbox-size: $size-s;
$checkbox-spacing: $spacing-xs;
$checkbox-border-size: $border-xs;
$checkbox-border-color: $color-controlborder;
$checkbox-border-color--hover: $color-controlborder--hover;
$checkbox-border-color--active: $color-controlborder--active;
$checkbox-radius: $radius-control;
$checkbox-active-background-color: $color-primary;
$checkbox-active-background-color--hover: $color-primary--hover;
$checkbox-active-background-color--active: $color-primary--active;

$checkbox-icon-size: $size-s;
$checkbox-icon-color: $color-controlelement;
$checkbox-active-icon-color: $color-primary-text;

$checkbox-label-color: $color-control;

$checkbox-group-spacing: $spacing-xxs;

.checkbox-group {
  .checkbox-container + .checkbox-container {
    margin-top: $checkbox-group-spacing;
  }
}

.checkbox-container {
  display: block;

  label {
    display: flex;
    align-items: center;
    &.reverse {
      flex-direction: row-reverse;
      justify-content: space-between;
      .checkbox {
        margin-right: 0;
        margin-left: $checkbox-spacing;
      }
    }
  }

  .checkbox {
    position: relative;
    margin-right: $checkbox-spacing;
    width: $checkbox-size;
    height: $checkbox-size;
    cursor: pointer;
    input {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      &:checked~.checkbox-appearance {
        background: $checkbox-active-background-color;
        border: none;
        mtg-svg-icon {
          display: block;
          color: $checkbox-active-icon-color;
        }
      }
    }
    .checkbox-appearance {
      display: flex;
      align-items: center;
      justify-content: center;
      width: $checkbox-size;
      height: $checkbox-size;
      border: $checkbox-border-size solid $checkbox-border-color;
      border-radius: $checkbox-radius;
      mtg-svg-icon {
        display: none;
        width: $checkbox-size;
        height: $checkbox-size;
      }
    }
  }
  &:hover {
    .checkbox {
      .checkbox-appearance {
        border-color: $checkbox-border-color--hover;

        mtg-svg-icon {
          display: block;
          color: $checkbox-icon-color;
        }
      }
    }
  }
  &:active {
    .checkbox {
      .checkbox-appearance {
        border-color: $checkbox-border-color--active;
      }
    }
  }
  .label {
    @include font-control-label();
    color: $checkbox-label-color;
  }
}