@mixin checkbox-style($name, $color) {
  &.ui-#{$name} {
    color: $color;
  }
}

ui-input[type=checkbox] {
  cursor: pointer;
  display: inline-block;
  position: relative;
  text-align: center;
  overflow: hidden;
  color: $color-gray-dark;
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 1em;
  vertical-align: middle;
  &:hover, &.ui-checked {
    color: $color-primary;
  }
  &.ui-focus {
    @include focus($color-primary);
  }
  @include checkbox-style(dark, $color-dark);
  @include checkbox-style(gray, $color-gray-dark);
  @include checkbox-style(primary, $color-primary);
  @include checkbox-style(info, $color-info);
  @include checkbox-style(warning, $color-warning);
  @include checkbox-style(success, $color-success);
  @include checkbox-style(danger, $color-danger);
  &[disabled], &.ui-disabled{
    opacity: .5;
    cursor: not-allowed;
  }
  &[readonly] {
    cursor: default;
  }
}

.ui-input-checkbox {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  overflow: hidden;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: inherit;
}

.ui-checkbox {
  width: 100%;
  height: 100%;
  line-height: 1em;
  cursor: inherit;
  display: inline-block;
}

.ui-checkbox-checked {
  transform: scale(0);
  opacity: 0;
}

.ui-checkbox-checked, .ui-checkbox-unchecked {
  transition: all .3s;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin-top: 1px;
}