// iOS Checkbox
// --------------------------------------------------

$checkbox-ios-icon-size:              21px !default;
$checkbox-ios-background-color:       get-color(primary, base) !default;
$checkbox-ios-foreground-color:       get-color(primary, inverse) !default;


.checkbox[mode="ios"] {

  .checkbox-icon {
    position: relative;
    width: $checkbox-ios-icon-size;
    height: $checkbox-ios-icon-size;
    border-radius: 50%;
    background-color: $checkbox-ios-foreground-color;
    border: 1px solid #c4c4c4;
  }

  &[aria-checked=true] .checkbox-icon {
    background-color: $checkbox-ios-background-color;
    border-color: $checkbox-ios-background-color;

    &::after {
      position: absolute;
      border: 1px solid $checkbox-ios-foreground-color;
      top: 3px;
      left: 7px;
      width: 4px;
      height: 9px;
      border-left: none;
      border-top: none;
      content: '';
      transform: rotate(45deg);
    }
  }

  .input-label {
    color: inherit;
  }

}