// Material Design Checkbox
// --------------------------------------------------

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


.checkbox[mode="md"] {

  .checkbox-icon {
    position: relative;
    width: $checkbox-md-icon-size;
    height: $checkbox-md-icon-size;
    border-radius: $checkbox-md-icon-size / 2;
    background-color: $checkbox-md-foreground-color;
    border: 1px solid $checkbox-md-background-color;
  }

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

    &::after {
      position: absolute;
      border: 1px solid $checkbox-md-foreground-color;
      top: 3px;
      left: 8px;
      width: 5px;
      height: 12px;
      border-left: none;
      border-top: none;
      content: '';
      transform: rotate(45deg);
    }
  }

}