$checkbox-width: 18px !default;
$checkbox-height: $checkbox-width !default;
$checkbox-margin: 8px !default;
$checkbox-border-radius: 2px !default;
$checkbox-border-width: 2px !default;
$checkbox-text-margin: 10px !default;
$checkbox-top-left: 12px !default;

md-checkbox {
  box-sizing: border-box;
  display: block;
  margin: $checkbox-margin;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  user-select: none;
  @include rtl(padding-left, $checkbox-width, 0);
  @include rtl(padding-right, 0, $checkbox-width);
  position: relative;
  line-height: $checkbox-width + $checkbox-margin;
  min-width: $checkbox-width;
  min-height: $checkbox-width;

  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }

  &.md-focused:not([disabled]) {
    .md-container:before {
      left: -8px;
      top: -8px;
      right: -8px;
      bottom: -8px;
    }

    &:not(.md-checked) {
      .md-container:before {
        background-color: rgba(0, 0, 0, 0.12);
      }
    }
  }

  .md-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: $checkbox-width;
    height: $checkbox-height;
    @include rtl(left, 0, auto);
    @include rtl(right, auto, 0);

    &:before {
      background-color: transparent;
      border-radius: 50%;
      content: '';
      position: absolute;
      display: block;
      height: auto;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      transition: all 0.5s;
      width: auto;
    }

    &:after {
      content: '';
      position: absolute;
      top: -10px;
      right: -10px;
      bottom: -10px;
      left: -10px;
    }

    .md-ripple-container {
      position: absolute;
      display: block;
      width: auto;
      height: auto;
      left: -15px;
      top: -15px;
      right: -15px;
      bottom: -15px;
    }
  }

  &.md-align-top-left > div.md-container {
    top: $checkbox-top-left;
  }

  // unchecked
  .md-icon {
    transition: 240ms;
    position: absolute;
    top: 0;
    left: 0;
    width: $checkbox-width;
    height: $checkbox-height;
    border-width: $checkbox-border-width;
    border-style: solid;
    border-radius: $checkbox-border-radius;
  }

  &.md-checked .md-icon {
    border: none;
  }

  // disabled
  &[disabled] {
    cursor: no-drop;
  }


  &.md-checked .md-icon:after {
    transform: rotate(45deg);
    position: absolute;
    left: $checkbox-width / 3;
    top: $checkbox-width / 9;
    display: table;
    width: $checkbox-width / 3;
    height: $checkbox-width * 2 / 3;
    border-width: $checkbox-border-width;
    border-style: solid;
    border-top: 0;
    border-left: 0;
    content: '';
  }

  .md-label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    user-select: text;

    @include rtl(margin-left, $checkbox-text-margin, 0);
    @include rtl(margin-right, 0, $checkbox-text-margin);

  }
}
