@use '../../scss/base/mixins' as *;

.styledCheckbox {
  position: relative;
  height: var(--radio-size);
  width: var(--radio-size);
  border: solid var(--purple) 1px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  &:not(.disabled):hover {
    border-color: var(--dark-purple);
  }
  &.radio {
    height: var(--radio-size);
    width: var(--radio-size);
    border-radius: 100%;
    align-self: center;
  }
}

.checkboxLabel {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-regular);
  color: var(--dark-purple);
  line-height: 18px;
  cursor: pointer;
}

.clickableContainer {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
  &.hideLabel {
    grid-template-columns: auto;
  }
}

.checkmark svg path {
  stroke: var(--white);
  stroke-width: 10;
}

.checkboxContainer {
  display: flex;
  align-items: center;
  &.checked {
    .styledCheckbox {
      background: var(--dark-blue);
      border-color: var(--dark-blue);
      &.radio {
        border-color: var(--checkbox-color);
        background-color: var(--checkbox-color);
      }
    }
    &.disabled {
      .styledCheckbox {
        background: var(--light-gray);
        border-color: var(--light-gray);
        &.radio {
          background: var(--light-gray);
          border-color: var(--light-gray);
        }
      }
      .iconColor svg path {
        stroke: var(--medium-gray);
      }
    }
  }
  &.partialChecked {
    .styledCheckbox {
      background: var(--dark-blue);
      border-color: var(--dark-blue);
    }
    &.disabled {
      .styledCheckbox {
        background: var(--light-blue);
        border-color: var(--medium-blue);
      }
      .iconColor svg path {
        fill: var(--medium-blue);
      }
    }
  }
  &.disabled {
    .checkboxLabel {
      color: var(--medium-gray);
    }
    .styledCheckbox {
      border-color: var(--medium-gray);
      &.radio {
        border-color: var(--medium-gray);
      }
    }
  }
  &.error {
    .checkboxLabel {
      color: var(--red);
    }
    .styledCheckbox {
      border-color: var(--red);
    }
  }
  .hiddenCheckbox {
    position: absolute;
    display: none;
  }
}