// ********************************************
// container definition
$el-container: #{$prefix}-form-element-checkbox;
$el-container-error: #{$el-container}--error;
$el-container-disabled: #{$el-container}--disabled;
$el-container-read-only: #{$el-container}--readonly;
// ********************************************
// elements
$el-input: #{$el-container}__input;
$el-label: #{$el-container}__label;
$el-button: #{$el-container}__input-button;
$el-text: #{$el-container}__label-text;
$el-children: #{$el-container}__checkbox-children;


// ********************************************
// local
$border-type: solid 1px;
$checkbox-size: space(s);


.#{$el-text} {
  position: relative;
  margin-left: space(xs);
  bottom: space(xxs) * (-0.25);// todo: fix - extra pixel below the text. The font itself has some misalignment
}
*::-ms-backdrop, .#{$el-text} { bottom: 0; } /* IE11 */

.#{$el-label} {
  @include body-text-style();
  display: flex;
  align-items: flex-start;
  position: relative;
  cursor: pointer;
  color: color(neutral, 800);

  .#{$el-button} {
    pointer-events: none;
  }

  &:first-child:not(:last-child) {
    margin-right: space(xs);
  }
  
  & > span:first-child {
    height: 16px;
  }
}

.#{$el-children}{
  padding-left: space(m);
}

// ********************************************
// Default container & elements           *****
.#{$el-container} {
  padding-bottom: space(s);
}

// ********************************************
// Error container & elements             *****
.#{$el-container-error} {

}

// ********************************************
// Disabled container & elements          *****
.#{$el-container-disabled} {

  .#{$el-label} {
    cursor: not-allowed;
  }

  .#{$el-text} {
    color: color(neutral, 500);
  }

}

// ********************************************
// Read only container & elements         *****
.#{$el-container-read-only} {

}


@import './elements/CheckMark';

// Mobile
@include md {
  .#{$el-text} {
    margin-left: toMobile(space(s));
  }

  .#{$el-container} {
    padding-bottom: toMobile(space(s));
  }
}