.checkbox{
  display:inline-block;
  position:relative;
  cursor: pointer;
  .caption{
    display:inline-block;
    height:$component-size;
    line-height: $component-size;
    vertical-align:middle;
    font-size:$font-size;
    cursor: pointer;
  }
  input[type=checkbox]{
    position:absolute;
    opacity:0;
    display:block;
    width:100%;
    height:100%;
    z-index: 1;
    cursor: pointer;
    &+.check {
      background-color: $background-color;
      width:$component-size-small;
      height:$component-size-small;
      border: $border-width solid transparent;
      display:inline-block;
      vertical-align:middle;
      position:relative;
      cursor: pointer;
      &:after {
        position: absolute;
        vertical-align: middle;
        color: transparent;
        font-size: 0;
        content: "";
        height: 0.5rem;
        width: 0.8rem;
        background-color: transparent;
        border-left: 0.1875rem solid;
        border-bottom: 0.1875rem solid;
        border-color: transparent;
        left: 50%;
        top: 50%;
        margin-left: -0.325rem;
        margin-top: -0.365rem;
        display: block;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        transition: all 0.2s linear;
      }
    }
    &:checked{
      &+.check{
        &:after{
          border-color: $title-color;
          transition: all 0.2s linear;
        }
      }
    }
  }
  &.border{
    input{
      &+ .check{
        border:$border-width-large solid $border-color;
      }
    }
  }
}

.checkbox-group{
  display: inline-block;
}