@import '../../var.less';

.checkbox-item {
  height: 40px;
  padding: 7px 13px;
  overflow: hidden;
  font-size: @font-size-main;
  line-height: 22px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid @gray-light-color;
  border-radius: 2px;
  box-sizing: border-box;

  &.checked {
    position: relative;
    color: @primary-color;
    background-color: @select-item-checked-bgc;
    border-color: @primary-color;

    &::before {
      position: absolute;
      right: -20px;
      bottom: -23px;
      width: 40px;
      height: 40px;
      background-color: @primary-color;
      content: '';
      transform: rotate(-45deg);
    }

    .icon {
      position: absolute;
      right: -2px;
      bottom: 2px;
      font-size: 12px;
      color: white;
    }
  }
}

.form_wrap_checkbox {
  color: @font-primary;

  .checkbox-item {
    margin: 0 0 8px;
  }
}