@use '@cfpb/cfpb-design-system/src/abstracts' as *;
@use '@cfpb/cfpb-design-system/src/utilities/index' as *;

:host {
  // Theme variables.
  --choice-border: var(--choice-border-default);
  --choice-border-hover: var(--choice-border-hover-default);
  --choice-bg: var(--choice-bg-default);
  --choice-mark: var(--choice-mark-default);
  --choice-mark-disabled: var(--choice-mark-disabled-default);

  // Private variables.
  --choice-border-width-addendum: 0;
}

.cfpb-checkbox-icon {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid var(--choice-border);
  outline: var(--choice-border-width-addendum) solid var(--choice-border);
  height: em-from-px(18px);
  width: em-from-px(18px);
  background-color: var(--choice-bg);

  // Offset so that the checkbox/radio fits within focused area.
  position: relative;
  top: 1px;
  left: 1px;
}

.disabled {
  cursor: not-allowed;

  --choice-border: var(--choice-border-disabled);
  --choice-bg: var(--choice-bg-disabled);
}

:not(.checked) cfpb-icon {
  display: none;
}

.checked.disabled cfpb-icon {
  color: var(--choice-mark-disabled);
}

.cfpb-checkbox-icon:not(.disabled, .borderless).focus,
.cfpb-checkbox-icon:not(.disabled, .borderless):focus,
.cfpb-checkbox-icon:not(.disabled, .borderless).hover,
.cfpb-checkbox-icon:not(.disabled, .borderless):hover {
  cursor: pointer;
  border-color: var(--choice-border-hover);
  box-shadow: 0 0 0 1px var(--choice-border-hover);
  outline-color: var(--choice-border-hover);
}

.validation-error,
.validation-warning,
.validation-success {
  --choice-border-width-addendum: 1px;
}

.validation-error {
  --choice-border: var(--choice-border-error);
}

.validation-warning {
  --choice-border: var(--choice-border-warning);
}

.validation-success {
  --choice-border: var(--choice-border-success);
}

.borderless {
  border-color: transparent;
  outline-color: transparent;
  background-color: transparent;
}