//
//// Checkbox control
//

$main-control-color: $main-color-green;
$control-size: 20px;
$control-inside-offset: 3px;
$control-disabled: #F5F5F5;
$control-border-color: #C4C4C4;
$control-border: 2px solid $control-border-color;
$chec-icon-size: 16px;


// <label class="zpa-control wswg-offset-bottom-xs"> // add class zpa-control-radio or zpa-control-checkbox
//   <input class="zpa-control__field" type="radio" name="form_name" >
//   <span class="zpa-control__indicator wswg-offset-right-xs"></span>
//   <span>Simple text label</span>
// </label>


//
//// Control main styles
//

.zpa-control {
  display: flex;
  align-items: center;
}

// Checkbox top position as text

.zpa-control--top {
  display: flex;
  align-items: flex-start;
}

// Control view

.zpa-control__indicator {
  display: inline-block;
  width: $control-size;
  height: $control-size;
  background-color: $white;
  border: $control-border;
  cursor: pointer;
  transition: border .3s ease-out;

  &:after {
    content: "";
    display: block;
    width: $chec-icon-size;
    height: $chec-icon-size;
    transform: scale(0);
    transition: transform .2s ease-out;
  }
}

// Control input field

.zpa-control__field {
  position: absolute;
  opacity: 0;
  z-index: -1;

  &:checked + .zpa-control__indicator {
    border-color: $main-control-color;

    &:after {
      transform: scale(.6);
    }
  }

  &:hover,
  &:focus {

    + .zpa-control__indicator {
      border-color: darken($main-control-color, 10%);
    }
  }

  &[disabled] + .zpa-control__indicator {
    border-color: $control-disabled;
    background-color: $control-disabled!important;
    cursor: default;
  }
}

.zpa-control-checkbox {

  .zpa-control__field:checked + .zpa-control__indicator {
    background-color: $main-control-color;
  }

  .zpa-control__indicator:after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNiAyNiIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiPgogIDxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0uMyAxNGMtLjItLjItLjMtLjUtLjMtLjdzLjEtLjUuMy0uN2wxLjQtMS40Yy40LS40IDEtLjQgMS40IDBsLjEuMSA1LjUgNS45Yy4yLjIuNS4yLjcgMEwyMi44IDMuM2guMWMuNC0uNCAxLS40IDEuNCAwbDEuNCAxLjRjLjQuNC40IDEgMCAxLjRsLTE2IDE2LjZjLS4yLjItLjQuMy0uNy4zLS4zIDAtLjUtLjEtLjctLjNMLjUgMTQuMy4zIDE0eiIvPgo8L3N2Zz4K);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center center;
    padding-left: 5px;
    padding-top: 4px;
  }
}