/*
  Storeblocks Checkbox Group component
  Loosely grabbed from
  https://github.com/storeblocks/storeblocks-ng/blob/main/packages/checkboxes/src/lib/checkboxes.component.scss
  2023-04-13
*/

/*
Usage:

Add one .checkbox-container block per checkbox. The .group-label and .hint parts are optional.

div.stb-checkbox tag supports the following classes:
* fluid - set full width (default is 288px)
* warning - show warning indication
* error - show error indication
* disabled - indicate disabled group (require disabled="disabled" attribute on input tags)

Individual checkboxes can also be disabled.

HTML:

<div class="stb-checkbox outer-container">
  <div class="error-container">
    <i class="icon-small"></i>
    <span class="error-heading">Viktig melding, lytt til radio</span>
  </div>

  <div class="group-label">Velg opptil flere saker</div>

  <div class="checkbox-container">
    <div class="checkbox">
      <input id="check1" name="test1" type="checkbox" value="" />
      <label for="check1">Kult valg</label>

      <div class="hint">
        <p class="hint-content">
          Det er viktig å velge riktig
        </p>
      </div>
    </div>
  </div>

  <div class="checkbox-container">
    <div class="checkbox">
      <input id="check2" name="test2" type="radio" value="" />
      <label for="check2">Kult valg også</label>
    </div>
  </div>
</div>
*/

.stb-checkbox {
  width: 288px;
  padding: 0 24px 0 0;
}

.stb-checkbox.fluid {
  width: 100%;
}

.stb-checkbox.error i:before {
  content: 'error-filled';
}

.stb-checkbox.error i {
  color: var(--color-error-accent);
  /* Overriding empty icon since we fill it with :before content */
  background-color: transparent;
}

.stb-checkbox.error {
  background-color: var(--color-error-background);
  border: 3px solid var(--color-error-accent);
  padding-left: 24px;
}

.stb-checkbox.warning i:before {
  content: 'warning-filled';
}

.stb-checkbox.warning i {
  color: var(--color-warning-accent);
  /* Overriding empty icon since we fill it with :before content */
  background-color: transparent;
}

.stb-checkbox.warning {
  background-color: var(--color-warning-background);
  border: 3px solid var(--color-warning-accent);
  padding-left: 24px;
}

.stb-checkbox .error-container i {
  margin-top: 1px;
}

.stb-checkbox .error-container {
  height: 48px;
  margin-top: 8px;
  margin-left: -3px;
  display: none;
  align-items: center;
}

.stb-checkbox.warning .error-container,
.stb-checkbox.error .error-container {
  display: flex;
}

.stb-checkbox .error-heading {
  display: inline-block;
  font-weight: 600;
  margin-left: 20px;
}

.stb-checkbox .group-label {
  font-weight: 600;
  line-height: normal;
  margin-top: 6px;
  margin-bottom: 22px;
}

.stb-checkbox.disabled .group-label {
  color: var(--color-disabled);
}

.stb-checkbox .checkbox-container {
  min-height: 48px;
  display: flex;
  align-items: center;
}

.stb-checkbox .checkbox {
  margin: 0 0 8px;
  position: relative;
  width: 200px;
  line-height: normal;
}

.stb-checkbox .checkbox.fluid {
  width: 100%;
}

.stb-checkbox .checkbox input {
  position: absolute;
  top: 0;
  outline: none;
  opacity: 0;
}

.stb-checkbox .checkbox input[disabled] {
  cursor: not-allowed;
}

.stb-checkbox .checkbox input[disabled] + label {
    color: var(--color-disabled);
    cursor: not-allowed;
}

.stb-checkbox .checkbox input[disabled] + label:before {
  border-color: var(--color-disabled);
}

.stb-checkbox .checkbox input:checked + label:before {
  background: var(--color-disabled);
  border-color: var(--color-disabled);
  border: 2px solid var(--color-selection);
  background: var(--color-selection);
}

.stb-checkbox .checkbox input:checked + label:after {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  opacity: 1;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  /* checkmark icon */
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOCA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNy44MjA3IDAuNTQ1MDQyQzguMDcxOTMgMC44MTQyMDkgOC4wNTczOCAxLjIzNjA3IDcuNzg4MjEgMS40ODcyOUwyLjc4ODIxIDYuMTUzOTZDMi41MjU1OCA2LjM5OTA4IDIuMTE1OTYgNi4zOTIwMiAxLjg2MTkzIDYuMTM3OTlMMC4xOTUyNjIgNC40NzEzMkMtMC4wNjUwODc0IDQuMjEwOTggLTAuMDY1MDg3NCAzLjc4ODg3IDAuMTk1MjYyIDMuNTI4NTJDMC40NTU2MTIgMy4yNjgxNyAwLjg3NzcyMiAzLjI2ODE3IDEuMTM4MDcgMy41Mjg1MkwyLjM0OTMxIDQuNzM5NzVMNi44Nzg0NSAwLjUxMjU1MUM3LjE0NzYyIDAuMjYxMzI4IDcuNTY5NDggMC4yNzU4NzUgNy44MjA3IDAuNTQ1MDQyWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4K');
}

.stb-checkbox .checkbox input + label {
  position: relative;
  cursor: pointer;
  padding-left: 40px;
  padding-top: 1px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  display: inline-block;
}

.stb-checkbox .checkbox input + label:before {
  content: '';
  position: absolute;
  box-sizing: border-box;
  left: 0;
  top: 4px;
  background: var(--color-background);
  width: 16px;
  height: 16px;
  display: block;
  border-radius: 2px;
  border: 2px solid var(--color-on-background);
}

/* :focus-visible w/fallback for Webkit */
.stb-checkbox .checkbox input:focus + label {
  outline: 2px solid var(--color-focus);
  outline-offset: 8px;
}
.stb-checkbox .checkbox input:focus:not(:focus-visible) + label {
  outline: 0;
}

.stb-checkbox .checkbox input:focus-visible + label {
  outline: 2px solid var(--color-focus);
  outline-offset: 8px;
}

.stb-checkbox .checkbox.fluid {
  width: 100%;
}

.stb-checkbox .hint {
  margin-left: 40px;
  margin-top: 21px;
}

.stb-checkbox .hint-content {
  font-size: 14px;
  color: var(--color-on-background);
  line-height: 24px;
  margin: 5px 0 0;
}

.stb-checkbox.disabled .hint-content {
  color: var(--color-disabled);
}

.checkbox-container {
  position: relative;
}

.tooltip {
  visibility: hidden;
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 4px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.checkbox-container:hover .tooltip {
  visibility: visible;
}