styles.css

@import "fyndiq-styles-colors/colors.css";

.wrapper {
  display: inline-flex;
  vertical-align: top;

  &:not(.wrapperDisabled) {
    cursor: pointer;
  }
}

.wrapperDisabled {
  color: var(--color-lightgrey);
}

.checkmark {
  display: inline-block;
  width: 14px;
  height: 16px;
  align-self: center;
}

.checkbox {
  appearance: none;
  outline: none;
  position: relative;
  top: 3px;
  height: 16px;
  width: 16px;
  margin: 0 4px;
  padding: 1px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  text-align: center;
  font-size: 11px;
  cursor: pointer;

  &:before {
    content: "✓";
    color: white;
    opacity: 0;
  }

  &:focus {
    border-color: var(--color-lightgrey);
  }

  &:indeterminate {
    background: linear-gradient(-45deg, var(--color-red), transparent, var(--color-red), transparent, var(--color-red), transparent, var(--color-red), transparent, var(--color-red), transparent, var(--color-red), transparent, var(--color-red), transparent, var(--color-red), transparent);
  }

  /* Hide the checkbox when not in frame mode */
  &:not(.checkboxFrame) {
    display: none;
  }

  /* Hide the custom checkmark when the checkbox is not checked */
  &:not(:checked) + .checkmark {
    opacity: 0;
  }

  &:checked {
    border-color: var(--color-red);
    background: var(--color-red);

    &:before {
      opacity: 1;
    }

    &:focus {
      border-color: var(--color-border);
    }
  }
}

.label {
  display: inline-block;
  margin-left: 4px;
}