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

:host {
  // Theme variables.
  --list-item-bg-hover: var(--gray-5);
  --list-item-border-focus: var(--pacific);

  display: block;
}

// Remove default focus ring.
:host(:focus) {
  outline: none;
}

// Add custom focus ring.
:host(:not([disabled]):focus-within) {
  outline: 1px dotted var(--list-item-border-focus);
  outline-offset: 2px;
}

:host([checked]) {
  .checkbox::before {
    background-image: $cfpb-background-icon-svg-approved;

    background-size: auto $cf-icon-height;
    background-repeat: no-repeat;
    background-position: center 0;
  }
}

:host([type='plain']) {
  .checkbox::before {
    border-color: transparent;
    outline-color: transparent;
    background-color: transparent;
  }
}

:host([hidden]) {
  display: none;
}

.container {
  display: block;
  padding: 6.5px 10px;
}

.checkbox {
  display: inline-grid;

  // 30px is width of checkbox/radio button plus the needed padding.
  grid-template-columns: rem-from-px(30px) auto;
  vertical-align: top;

  // Wrap long words in narrow form fields to prevent clipping
  overflow-wrap: anywhere;
}

.selectable {
  cursor: pointer;

  &:hover {
    background: var(--list-item-bg-hover);
    transition: background-color 0.2s;
    cursor: pointer;
  }
}