.@{css-prefix}checkbox {
  display: inline-block;
  user-select: none;
  padding-left: 0;
  line-height: @line-height-md;
  vertical-align: bottom;
  label{
    cursor: pointer;
    margin-bottom: 0;
    line-height: 0;
  }
  & + .@{css-prefix}checkbox {
    margin-left: @padding-xl;
  }
  .bui-checkbox-input-wrapper{
    display: inline-block;
    background-color: @checkbox-bg;
    vertical-align: top;
    position: relative;
    height: 16px;
    width: 16px;
    border: 1px solid @checkbox-border;
    border-radius: 2px;
    margin-top: 3px;
    margin-right: 8px;
    &:hover {
      border-color: @checkbox-hover-border;
    }
    .bui-icon-check{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      opacity: 0;
      fill: @text-color-white;
    }
  }
  &.secondary {
    .bui-checkbox-input-wrapper{
      &:hover {
        border-color: @secondary-color;
      }
    }
  }
  &.empty .bui-checkbox-input-wrapper{
    margin-right: 0;
  }
  .bui-checkbox-input-label {
    display: inline-block;
    font-size: @font-size-md;
    line-height: @line-height-md;
    font-weight: @font-weight-regular;
    color: @text-color-1;
  }
  input.bui-checkbox-input{
    display: none;
  }
  &.checked{
    .bui-checkbox-input-wrapper{
      border: 1px solid @checkbox-checked-border;
      background-color: @checkbox-checked-bg;
      .bui-icon-check{
        opacity: 1;
      }
    }
    &.secondary {
      .bui-checkbox-input-wrapper{
        border: 1px solid @secondary-color;
        background-color: @secondary-color;
      }
    }
  }
  &.indeterminate{
    .bui-checkbox-input-wrapper {
      border: 1px solid @checkbox-indeterminate-border;
      background-color: @checkbox-indeterminate-bg;
      .bui-icon-check {
        opacity: 0;
      }
      &:after{
        content: '';
        position: absolute;
        height: 2px;
        width: 10px;
        border-radius: 2px;
        background: @text-color-white;
        top: 6px;
        left: 2px;
      }
    }
    &.secondary {
      .bui-checkbox-input-wrapper {
        border: 1px solid @secondary-color;
        background-color: @secondary-color;
      }
    }
  }
  
  &.disabled{
    color: @disabled-default-color;
    .bui-checkbox-input-wrapper{
      border-color: @checkbox-disabled-border;
      background-color: @checkbox-disabled-bg;
    }
    .bui-icon-check {
      cursor: not-allowed;
    }
    &.checked{
      .bui-checkbox-input-wrapper{
        & when (@theme = dark) {
          opacity: 0.4;
          border-color: @checkbox-checked-dark-disabled-border;
          background-color: @checkbox-checked-dark-disabled-bg;
        }
        & when not (@theme = dark) {
          border-color: @checkbox-checked-disabled-border;
          background-color: @checkbox-checked-disabled-bg;
        }
        .bui-icon-check{
          fill: @text-color-white;
        }
      }
      .secondary {
        .bui-checkbox-input-wrapper{
          & when (@theme = dark) {
            border-color: @secondary-color;
            background-color: @secondary-color;
          }
          & when not (@theme = dark) {
            border-color: @secondary-color-4;
            background-color: @secondary-color-4;
          }
        }
      }
    }
    &.indeterminate {
      .bui-checkbox-input-wrapper {
        & when (@theme = dark) {
          opacity: 0.4;
          border-color: @checkbox-indeterminate-dark-disabled-border;
          background-color: @checkbox-indeterminate-dark-disabled-bg;
        }
        & when not (@theme = dark) {
          border-color: @checkbox-indeterminate-disabled-border;
          background-color: @checkbox-indeterminate-disabled-bg;
        }
        .bui-icon-check {
          opacity: 0;
        }
        &:after{
          content: '';
          position: absolute;
          height: 2px;
          width: 10px;
          border-radius: 2px;
          background: @primary-color-6;
          top: 6px;
          left: 2px;
        }
      }
      &.secondary {
        .bui-checkbox-input-wrapper {
          & when (@theme = dark) {
            border-color: @secondary-color;
            background-color: @secondary-color;
          }
          & when not (@theme = dark) {
            border-color: @secondary-color-4;
            background-color: @secondary-color-4;
          }
          &:after{
            background: @secondary-color-6;
          }
        }
      }
    }
  }
}

.@{css-prefix}checkbox-rtl {
  direction: rtl;
  & + .@{css-prefix}checkbox {
    margin-right: @padding-xl;
    margin-left: 0;
  }
  .bui-checkbox-input-wrapper {
    margin-right: 0;
    margin-left: 8px;
  }
}