@use '../styles/variables' as *;
@use '~@cb-general/core/styles/mixins' as *;

$color: var(--FlatCheckbox-color, $colorGreen);

.checked .label {
  color: $color;
}

.label {
  margin-left: toRem(9);
}

.icon {
  position: relative;
  background-color: #000;
  border: 1px solid #535561;
  width: 2.5em;
  height: 2.5em;
  border-radius: 5px;
}

.checkedIcon {
  composes: icon;

  &:before {
    content: '';
    position: absolute;
    width: 70%;
    height: 70%;
    top: 50%;
    left: 50%;
    border-radius: 3px;
    transform: translate(-50%, -50%);
    background-color: $color;
  }
}