.checkbox-wrapper {
  display: flex;
  align-items: center;
  user-select: none;
}

input[type="checkbox"] {
  &.checkbox {
    margin: 0 12px 0 0;
    -webkit-appearance: none;
    appearance: none;

    width: 22px;
    min-width: 22px;
    height: 22px;
    border: 1px solid var(--color-text-secondary);
    border-radius: 4px;
    position: relative;
    cursor: pointer;

    &:checked {
      border-color: var(--color-bg-brand-solid);
    }

    &:checked::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 14px;
      height: 14px;
      background-color: var(--color-bg-brand-solid);
      border-radius: 2px;
    }
  }
}