@use './modules/_helpers.scss' as helper;
@use './mixins/_themesMixins.scss' as theme;
@use './mixins/_interactions.scss' as interaction;
@use './modules/_primitivesVariables.scss' as var;
@import './modules/_pxToRem.scss';

$checkbox-button-size: 24px;
$checkbox-button-gap: 8px;

// TO DO CHECKBOXES AND RADIOS SHARE ALL CODE EXCEPT THE LABEL:BEFORE

.checkbox__wrap {
  border: none;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  flex: 1 0 auto;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.checkbox__title {
  margin-bottom: 8px;
}

.checkbox__option {
  @include interaction.input-focus;
  border-radius: helper.$helpers-borderRadius;
  display: flex;
  position: relative;
}

.checkbox__text {
  max-width: calc(100% - ($checkbox-button-size + $checkbox-button-gap + 2px));
}

.checkbox__label {
  @include interaction.input-disabled;
  @include theme.color-input-label;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  gap: $checkbox-button-gap;
  padding: 2px 2px 2px 0;
  transition: helper.$helpers-transitionDefault;
  width: fit-content;

  span {
    padding-bottom: 0;
    padding-top: 2px;
  }

  &:before {
    @include theme.border-controller-default;
    align-items: center;
    background-color: transparent;
    border-radius: helper.$helpers-borderRadiusSmall;
    border-style: solid;
    border-width: 1px;
    box-shadow: inset 0px 0px 0px 0 var.$color-blue-500;
    content: '';
    display: flex;
    font: var(--fa-font-solid);
    height: $checkbox-button-size;
    justify-content: center;
    transition: helper.$helpers-transitionDefault;
    width: $checkbox-button-size;
  }
}

.checkbox__input {
  @include interaction.input-focus-label;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  left: 0;
  margin: 0;
  position: absolute;
  top: 0;
  width: 0;

  &:checked + label::before {
    @include theme.background-controller-selected;
    @include theme.border-controller-selected;
    content: '\f00c';
    color: $color-white-50;
  }
}

.checkbox__border {
  @include theme.border-controller-default;
  padding: 16px;
  border-radius: helper.$helpers-borderRadius;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}