/* Shared custom UI elements */

.custom-checkbox {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  position: relative;
  top: 0.125rem;
  left: 0.125rem;
  background-color: #fff;
  border: 1px solid #777777;
  border-radius: 0.1em;
  box-sizing: border-box;
  overflow: visible;
  cursor: pointer;
}

.custom-checkbox--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.custom-checkbox[aria-checked="true"] {
  background-color: var(--active-color, #7ab094);
  border-color: #777777;
}

.custom-checkbox[data-fill="false"][aria-checked="true"] {
  background-color: #fff;
}

.custom-checkbox svg {
  width: calc(100% + 0.125rem);
  height: calc(100% + 0.125rem);
  fill: none;
  pointer-events: none;
}

.tick-mark {
  display: none;
  stroke: #000;
  stroke-width: 13;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.custom-checkbox[aria-checked="true"] .tick-mark {
  display: block;
}