@use '../../utilities/functions' 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;
  }
}