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

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

  display: block;

  .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;
    }
  }
}

// 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;
}